JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="layout">
  <div class="navbar"></div>
  <div class="sidebar"></div>
  <div class="kontent">
    
  </div>
  <div class="right-sidebar"></div>
</div>

SCSS

.layout {
  display: grid;
  grid-template-areas:
    "navbar      navbar     navbar"
    "sidebar kontent right-sidebar";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 66px 1fr;
  height: 100vh;
  overflow-y: auto;
}
.navbar {
  grid-area: navbar;
  position: sticky;
  top: 0;
  background: #000;
}
.sidebar {
  grid-area: sidebar;
  background: pink;
  height: calc(100vh - 66px);
  position: sticky;
  top: 66px;
}
.kontent {
  grid-area: kontent;
  background: red;
  min-height: 900px;
}
.right-sidebar {
  grid-area: right-sidebar;
  background: blue;
  height: calc(100vh - 66px);
  position: sticky;
  top: 66px;
  overflow-y: auto;
}