JSFiddle - React, Tailwind, and code Playground

by lazybios

HTML

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

CSS

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%; background-color:green}
header {margin-top:-50px; height:50px; background-color:red;}
footer {margin-bottom:-50px; height:50px; background-color:red;}
p {margin:0; padding:0 0 1em 0;} /* had to take the margin off the p as in some browsers this can add extra margin to #content div*/