JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="main">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  
</div>

SASS

.main
  display: grid
  grid-template-columns: 1fr 1fr
  grid-template-rows: auto auto
  align-items: fill
 
  
  .a
    background: red
    min-height: 200px
    grid-row: span 2
  
  .b
    background: green
    height: 50px
  .c
    background-color: blue
    min-height: 50px
    
  > *
    border: 1px solid black
    opacity: 0.7