JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>

CSS

html{height:100%;}
body{
    margin:0;
    height:100%;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
    background: #ccc;
    height: 100px;
}