JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="grid">
      <div class="header"></div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
</div>

CSS

.container {
  display: flex;
  min-height: 1000px;
  flex-direction: column;
}

.grid {
  display: grid;
  flex: 1;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  justify-items: stretch;
  align-items: stretch;
}

.header {
  grid-area: header;
  background-color: red;
  height: 100px;
}

.main {
  grid-area: main;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
  height: 100px;
}