JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ctnr">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

CSS

.ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

header {
  grid-column: 1 / -1;
  background: turquoise;
}

nav {
  grid-column: 1 / 2;
  background: grey
}

main {
  grid-column: 2 / 3;
  background: yellow;
}

footer {
  grid-column: 1 / -1;
  background: red;
}
body { margin: 0; }