JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

html,
body {
  margin: 0px;
}

main {
  background-color: green;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em auto auto 1em;
  height: 100vh;
}

div {
  width: calc(100vw - (100vw - 100%)); /* 100% of viewport width without scrollbar */
  height: calc(100vw * 9 / 16); /* ratio */
  max-height: calc(50vh - 1em);
  max-width: calc((50vh - 1em) * 16 / 9);
  place-self: center;
}

.red {
  background: red;
}

.blue {
  background: blue;
}