JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>

CSS

*{margin:0;padding:0; height:100%;}
#wrapper {
    min-height:100%;
    position:relative; 
    display: table; 
    width:100%
}

#header {
    width:100%;
    height:auto;
    margin-top: 0;
    background:#dbfcd6; display: table-row;
}
#content {
    width:100%; display:table-row; background:green; height:100%
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    margin-top: 0;
    margin-bottom: 0;
    bottom:0;
    left:0; background:yellow;
    display: table-row;
}