JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="layout">
  <header class="header">header</header>
  <nav class="navbar">navbar</nav>
  <main class="content">content</main>
  <aside class="sidebar">sidebar</aside>
</div>

SCSS

.layout {
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "navbar sidebar"
    "content sidebar";
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr auto;

  > * {
    border: 1px solid black;
  }
  > .header {
    grid-area: header;
  }
  > .navbar {
    grid-area: navbar;
  }
  > .content {
    grid-area: content;
  }
  > .sidebar {
    grid-area: sidebar;
  }
}