JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  contains logo, nav and has fixed height
</header>
<div class="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>
<footer>
  fixed size footer
</footer>

CSS

html, body { height: 100% }
body {
 margin:0 auto;
 display: table;
 background: lightblue;
}
header { display:table-row; height:50px; background:orange }
div#content { display:table-row; background:lightgreen }
footer { display:table-row; height:100px; background:yellow }