JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div class="table">
            <div class="top row">
                <div class="cell">header</div>
            </div>
            <div class="middle row">
                <div class="container cell">
                    <p>the container div is to stop and top or bottom margins from p tags interfering with the middle div</p>
                </div>
            </div>
            <div class="bottom row">
                <div class="cell">footer</div>
            </div>
        </div>
    </div>

CSS

html, 
    body {min-height:100%; padding:0; margin:0;}
    
    #wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}
    
    .table {display:table; width:100%; height:100%;}
    .row {display:table-row;}
    .cell {display:table-cell;}
    
    .middle {background-color:green; height:100%;}
    .top {background-color:red;}
    .bottom {background-color:blue;}
    .container {padding:10px;}