JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; height:100%;">
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
        <!-- some content -->
    </div>
    <div style="width: 100%; height:85%; background-color: #00ff00"   >
        <!-- some content -->
    </div>
    <div style="width: 100%; height:5%;background-color: #0000ff ">
        <!-- some content -->
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}