JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="container">
  <header>Header</header>
  <aside>Left</aside>
  <main>Right</main>
</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;
}