JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="container">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-template-rows: 80px 600px 80px;
  grid-template-columns: 0.5fr 1fr;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
}

aside {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: pink;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background: yellow;
}