JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <header>Some fixed height header</header>
    <div id="content">
        <p>Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here Some actual content here
 Some actual content here</p>
    </div>
    <div class="push"></div>
</div>
<footer>
  Fixed height footer
</footer>

CSS

html, body { height: 100% }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
background: lightgreen;
}
header { height:50px; background:orange }
div#content {  }
footer, .push {
height: 100px;
}
footer { background: yellow }