JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="header">
        header
    </div>
    <table class="middle"><tr><td>
        body
        </td></tr>
        <tr><td>
        body2
        </td></tr
    </table>
    <div class="middle">
        body
    </div>
    <div class="footer">
        footer
    </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}
.header { 
    width: 90%;
    height: 100px; 
    background: rgba(0,255,0,.25); 
}
table.middle { 
    display: none; 
    box-model: border-box; 
    height: 600px;
    margin-top: -100px;
    padding-top: 100px;
    width: 100%;
    background: rgba(255,0,0,.25); 
}
div.middle { 
    display: block;
    box-model: border-box; 
    height: 600px;
    margin-top: -100px;
    padding-top: 100px;
    width: 100%;
    background: rgba(255,0,0,.25); 
}
.footer {
    width: 90%;
    height: 20px;
    background: rgba(0,0,255,.25); 
    position: absolute;
    bottom: 0px;
}
.container { 
    min-height: 100%;
    border: dashed 1px blue;
    position: relative;
}