JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<html>
  <head></head>
  <body>
    <main>
      <div class="notifications">Notifications</div>
      <div class="right-sidebar">Right Sidebar</div>
      <div class="left-sidebar">Left Sidebar</div>
      <div class="content">Content</div>
    </main>
  </body>
</html>

CSS

body {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  grid-template-columns: 235px 1.5fr 1fr 235px;
  grid-template-rows: 100px 1fr 1fr;
  grid-template-areas: "left-sidebar notifications notifications right-sidebar" "left-sidebar content content right-sidebar" "left-sidebar content content right-sidebar";
  max-width: 1440px;
  min-height: 100vh;
  width: 100%;
}

.left-sidebar { grid-area: left-sidebar; background: pink; position: sticky; top: 0; }
.right-sidebar { grid-area: right-sidebar; background: violet; }
.notifications { grid-area: notifications; background: red; }
.content { grid-area: content; background: grey; height: 200vh; }