JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">
uhkhkuhjk
</div>

CSS

* {margin:0;padding:0;} 



html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}