JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<main>
  <header>header</header>
  <section><div class="red">
  Red
  </div></section>
  <section><div class="blue">
  Blue
  </div></section>
  <footer>footer</footer>
</main>
</body>
</html>

CSS

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em auto auto 1em;
  height: 100vh;
}
section div {
  aspect-ratio: 16/9;
}
.red {
  background: red;
}
.blue {
  background: blue;
}