JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<div class="container">
  <header>W</header>
  <section class="main">W</section>
  <aside class="sidebar">W</aside>
  <footer>W</footer>
</div>

CSS

.container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";
    grid-gap: 60px;
}

header {
    grid-area: header;
}

.main {
    grid-area: main;
}

.sidebar {
    grid-area: sidebar;
}

footer {
    grid-area: footer;
}