JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  header
</header>
<div>
  left
</div>
<main>
  content
</main>
<aside>
  right
</aside>
<footer>
  footer
</footer>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  grid:
    "top    top    top    top    top    top    top    top    top    top    top   top" auto
    "left   left   main   main   main   main   main   main   main   right  right right" 1fr
    "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom" auto
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

header {
  grid-area: top;
}

footer {
  grid-area: bottom;
}

div {
  grid-area: left;
}

main {
  grid-area: main;
}

aside {
  grid-area: right;
}

@media (max-width: 600px) {
  body {
    grid-template:
      "top    top    top    top    top    top    top    top    top    top    top    top" auto
      "left   left   left   left   left   left   left   left   left   left   left   left" auto
      "main   main   main   main   main   main   main   main   main   main   main   main" 1fr
      "right  right  right  right  right  right  right  right  right  right  right  right" auto
      "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom" auto;
  }
}