JSFiddle - React, Tailwind, and code Playground

by doitlikejustin

HTML

<div id="grid1" class="grid"></div>
<div id="grid2" class="grid"></div>
<div id="grid3" class="grid"></div>
<div id="grid4" class="grid"></div>
<div id="grid5" class="grid"></div>

CSS

/* body { border: 4px solid #fff; } */
.grid { position: absolute; /* border: 2px solid #fff; */ }
#grid1 { background-color: blue; top: 0; left: 0; right: 35%; bottom: 65%; }
#grid2 { background-color: red; top: 0; right: 0; left: 65%; bottom: 35%; }
#grid3 { background-color: green; top: 35%; right: 35%; bottom: 35%; left: 35%; }
#grid4 { background-color: pink; top: 35%; right: 65%; bottom: 0; left: 0; }
#grid5 { background-color: orange; top: 65%; right: 0; bottom: 0; left: 35%; }