JSFiddle - React, Tailwind, and code Playground

HTML

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

CSS

body {
  display: grid;
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
}
#pageHeader {
  grid-row: 1;
  grid-column: 1 / 4;
  background-color: crimson;
  z-index: 1;
  opacity: .5;
}
#pageFooter {
  grid-row: 3;
  grid-column: 1 / 4;
}
#mainArticle {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
#mainNav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
#siteAds {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
}