JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="title">Title!</div>
    <div id="panels">
        <div id="panel0" class="small">0</div>
        <div id="panel1" class="small">1</div>
        <div id="panel2" class="small">2</div>
        <div id="panel3" class="wide">3</div>
    </div>
</div>

CSS

* { margin, padding: 0px; }
#content { background-color: black; }
#title { background-color: red; }
#panels { background-color: orange; }
#panel0 { background-color: purple; }
#panel1 { background-color: brown; }
#panel2 { background-color: orange; }
#panel3 { background-color: green; }

html, body, #content, #panels { max-height: 100%; height: 100%; max-width: 100%; width: 100%; }
#panels .small { float: left; }
#panels .wide { clear: both; }

#title { height : 2em; }
#panels .small { height: 75%; }
#panels .wide { height: 25%; }
#panel0, #panel1, #panel2 { width: 33.33%; }