JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <header>111</header>
  <main>222</main>
  <footer>333</footer>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

html, body {height: 100%;}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    flex: 0 0 auto;
}

main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
}