JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">header</header>
    <div id="content" class="site-content">I am just some content!</div>
    <footer id="colophon" class="site-footer" role="contentinfo">I am a footer</footer>
</div>

CSS

html, body, #page {
    height: 100%; /*make the elements to cover the whole page height*/
    margin: 0;
}
#page {
    display: table;
    width: 100%;
}
.site-header,
.site-content,
.site-footer {
    display: table-row; /*for all the three sections*/
}
.site-content {
    height: 100%; /*push header and footer to their minimum height */
    background: silver;
}