JSFiddle - React, Tailwind, and code Playground

by Matthew Marcus

HTML

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right light-blue"></div>
  <div class="inner-wrp dark-red">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
    </div>
  </div>
</div>

SCSS

$colors: (purple, green, light-blue, dark-red, brown, orange);

@each $color in $colors {
  .#{$color} {
    background: $color;
  }
}

$leftSideWidth: 500px;

.outer-wrp {
  width: 100vw;
  height: 100vh;
  .left-side {
    height:100vh;
    width: 500px;
    display: inline-block;
  }
  .top-right {
    width: calc(100vw - 500px);
    vertical-align: top;
    display: inline-block;
    height: 90px;
  }  
}