JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site grid-body">
  <main class="site-main">main</main>
  <footer class="site-footer">footer</footer>
</div>

CSS

body {
    padding: 16px 16px;
}
.grid-body {	
    display: grid;
    row-gap: 1.5rem;
    min-height: calc(100vh - 32px);	
    grid-template-rows: 1fr min-content;
}
.site-main {
    align-self: stretch;
    background: red;
}
.site-footer {
  background: blue;
}