JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="header"></div>
<div id="body">
<div id="test" style="">blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>blah
<br/>
</div>
</div>
<div id="footer"></div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
/* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
/* Height of the footer */
background:#6cf;
}
#test {
float:left;
}