JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="main">
        Put the remainder of the page here<br />
        1) Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        2) Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
        Lorum Ipsum Dolor Sit Amet<br />
    </div>
</div>

<div id="footer">
    Put the footer content here
</div>

CSS

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow:auto;
    padding-bottom: 60px; /* must be same height as the footer */
    
    
    line-height: 2;
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
}  


    /*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

#footer {
    position: relative;
    margin-top: -60px; /* negative value of footer height */
    height: 60px;
    clear:both;
    
    
    /*Extra attributes for this example*/
    line-height: 2;
    text-align: center;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
    box-shadow: 0 0 15px #00214B;
}