JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}