JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        header
    </div>
    <div id="mainBody">
        main body
    </div>
    <div id="footer">
        footer
    </div>
</div>

CSS

#wrapper {
    width: 100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
#mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
#footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}