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

:root {
  --padding-body: 16px;
}

* {
  box-sizing: border-box;
  margin:0;
}
html {
  display:grid;
  min-height: 100vh;
}
body {
  padding: var(--padding-body);
}

.grid-body {
  display: grid;
  row-gap: var(--padding-body);
  min-height: 100%;
  grid-template-rows: 1fr min-content;
}

.site-main {
  align-self: stretch;
}




.site-main {
  align-self: stretch;
  background: red;
}

.site-footer {
  background: blue;
}