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;
}

#body:after {
  content: "";
  display: table;
  clear: both;
}