JSFiddle - React, Tailwind, and code Playground

by kuzzmi

HTML

<div class="container">
  <div class="menu">
  
  </div>
  <div class="blocks">
    <div class="container">
      <div class="wrapper">
        <div class="child child1">
          <p>  </p>
        </div>
        <div class="child child2">
          <p> </p>
        </div>
        <div class="child child4">
          <p> </p>
        </div>
        <div class="child child4">
          <p> </p>
        </div>
        <div class="child child4">
          <p> </p>
        </div>
        <div class="child child4">
          <p> </p>
        </div>
      </div>
    </div>    
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  
  .container { // main container
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    flex-direction: row;
    background-color: #eee;
    overflow: auto;
    
    .menu { // left-column
      width: 16.66666667%;
      background-color: #dfdfdf;
    }
    
    .blocks { // mid-column
      padding: 0;
      height: 100%;
      width: 100%; 
      display: flex; 
      flex-direction: column; 
      flex: 1;
      background-color: #cacaca;
      
      .container {
        position: relative;
        flex: 1;
        
        .wrapper {
          position: absolute; 
          top: 0; 
          left: 0; 
          right: 0; 
          bottom: 0;

          .child {
            padding: 8px;
            float: left;
            
            p {
              background-color: #ffffff;
              height: 100%;
              width: 100%;
              margin: 0;
            }

            &.child1 {
              width: 50%; 
              height: 100%;
            }
             
            &.child2,
            &.child3 {
              width: 50%; 
              height: 50%;
            }
            
            &.child4 {
              width: 25%; 
              height: 25%;
            }
          }
        }
      }
      
    }
  }
}