JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <header>header</header>
    <section class="main-content">main-content</section>
    <footer>footer</footer>
  </body>

</html>

CSS

html {
  height: 100%;
}

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

header {
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

.main-content {
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer {
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}