JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
    <div class="nav">
    This is my Nav
    </div>
</header>
<div class="contentWrapper">

    
        <div class="panelWrapper">
            <div class="panel">
            Panel
            </div>
        </div>

    <div class="calloutWrapper">
        <div class="callout">Callout</div>
        <div class="callout">Callout</div>
        <div class="callout">Callout</div>
    </div>
</div>
</body>


        <script>

        </script>
</body>

CSS

/* Resets */

* {
	margin: 0;
	padding: 0;

}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* End Resets */

/*Content */

.contentWrapper {
    height: 100vh;
    width: 100%;
    background-color: black;
}

header {
    position: absolute;
    width: 100%;
}

.nav {
    width: 100%;
    background-color: blue;
}

.panelWrapper {
    background-color: black;
}

.panel {
    width: 100%;
    height: 100vh;
    background-color: red;
}

.footer {
    clear:both;
    width: 100%;
    background-color: gray;
    position: relative;
}

.calloutWrapper {
    background: green;
   height: 50%;
    
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.callout {
    width: 24%;
    min-height: 100%;
    background-color: blue;
    float:left;
    margin-right:1.3333333333%;
}

.callout.last{
    margin-right:0;
}
/* End Content */