JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">header</header>
<main class="main">main
lorem999
</main>
<footer class="footer">footer</footer>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  min-height: 100vh;
  margin: 0;
  font-family: 'Neucha', cursive;
}

.header {
  position: sticky;
  top: 0;
  padding: 1vh;
  background: #eee5;
}

.main {
  padding: 1vh;
  background: #a8d37c;
}

.footer {
  padding: 1vh;
}