JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div class="header">
      <p>Header</p>
    </div>
    <div class="main">
      <p>Main</p>
    </div>
    <div class="footer">
      <p>Footer</p>
    </div>
  </body>

CSS

html {
  /* min-height on body doesn't work unless it's parent (html) has an explicit height */
  height: 100%;
}

body {
  /* min-height because content larger than 100% of the view height should scroll */
  min-height: 100%;
  display: grid;
  /* we have 3 rows: header, main and footer. We want the main content to fill the empty space when the content doesn't fill the viewport */
  grid-template-rows: auto 1fr auto;
}

.header {
  background: red;
}

.main {
  background: yellow;
}

.footer {
  background: blue;
}