JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wr">
  <header>
    Header
  </header>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

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

main {
  padding: 10px 0;
  flex: 1 0 auto;
}

header {
  flex: 0 0 auto;
}

header, footer {
  background: #acacff;
  padding: 10px 0;
}

footer {
  flex: 0 0 auto;
}