JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div>header</div>
  <div class="content">content<br/>content<br/>content<br/>content<br/>content<br/></div>
  <div class="footer">footer</div>
</body>

CSS

html,
body {
  height: 100%;
}

body {
display: flex;
flex-direction: column;
}



.footer { 
 flex-grow: 1;
 height:50px;
 background: grey;
}