JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
    
<div class="content">
        
    <div class="block-outer"><div class="block-inner">
            <div class="element-quater">block1 25%-width sub-content</div>
            <div class="element-quater">block1 25%-width sub-content</div>
            <div class="element-quater">block1 25%-width sub-content</div>
            <div class="element-quater">block1 25%-width sub-content</div>
        </div>
    </div>
        
    <div class="block-outer">
        <div class="block-inner">
            <div class="element-quater">block2 25%-width sub-content</div>
            <div class="element-trithird">block2 75%-width sub-content</div>
        </div>
    </div>

    <div class="block-outer">
        <div class="block-inner">
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>            
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>            
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>    
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>
            <div class="element-third">block3 33%-width sub-content</div>    
        </div>
    </div>
        
    <div class="block-outer">
        <div class="block-inner">
            <div class="element-half">block4 50%-width sub-content</div>
            <div class="element-half">block4 50%-width sub-content</div>
        </div>
    </div>
        
    <div class="block-outer">
 ...

CSS

/* Декоративное оформление, можно менять, не имеет принципиального значения */
body {
    margin: 0;
    padding: 0;
}

.header {                       
    background: #ccc;
    padding: 10px;
}

.side-bar {
    background: #ae0;            
    height: 400px;                        
}

.block-outer {
    min-height: 100px;
    margin-bottom: 50px;            
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0)));
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
    background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
    background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
}
        

.block-inner > .element-quater {
    background: rgba(255,255,255,0.5);            
    margin-bottom: 10px;
}
        
.block-inner > .element-third {
    background: rgba(255,255,255,0.5);            
    margin-bottom: 10px;
}
        
.block-inner > .element-half {
    background: rgba(255,255,255,0.5);            
    margin-bottom: 10px;
}

.block-inner > .element-trithird {
    background: rgba(255,255,255,0.5);            
    margin-bottom: 10px;
}

.block-inner > .element-full {
    background: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

/* Декоративное оформление закончилось */
/* ---------- */
/* Суть вёрстки, перед изменением пойми что именно делаешь */

.side-bar {            
    width: 200px;                        
    margin-left:-250px; /* = -width -50px */
    margin-top: 50px; 
    float:left;
}
.content {
    width:100%;
    float:left;
}
.block-outer {            
    padding-left: 50px;
    padding-right: 300px; /* = .side-bar width +50px*2 , 50px -станда */
    padding-top: 50px;
   ...