JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <p>Header</p>
  </header>

  <div class="left">Navigation</div>
  <main class="center">
    <h1>Main</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam nesciunt minus cumque quidem non maiores voluptas, voluptates commodi ipsa eaque rem, illo ipsum deserunt optio repellendus rerum, possimus alias, quos?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laudantium molestias dicta nemo ab distinctio? Corrupti necessitatibus est, quis error laudantium ad, aspernatur repellendus repudiandae facilis velit delectus corporis ex?</p>
  </main>
  <div class="right">Related Links</div>

  <footer class="footer">Footer</footer>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4682B4;
  color: #fff;
  font-size: 150%;
}

.left {
  background-color: #ff9900;
}

.center {
  padding: 2%;
  background-color: #fff;
}

.right {
  background-color: #800080;
}

.footer {
  background-color: #339900;
  color: #fff;
  font-size: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  body {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: min-content 1fr min-content;
  }

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

  footer {
    grid-column: 1/-1
  }

}