JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header></header>
    <section id="content">
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        MAIN CONTENT<br />
        <section id="internal-footer"></section>
    </section>
    <footer></footer>
</body>

CSS

html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;background-color:#666;height:50px;}
footer{width:100%;position:absolute;bottom:0;left:0;background-color:#666;height:50px;}
#content{width:300px;margin:0 auto;position:relative;padding-bottom:100px;border:1px solid #000;}
#internal-footer{width:100%;position:absolute;bottom:0;left:0;padding-bottom:50px!important;background-color:#990;height:50px;}