JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="slack-container">
  <aside class="sidebar">
    
  </aside>
  <header class="header">

  </header>
  <main class="messages">
    
  </main>
  <aside class="activity-sidebar">
    
  </aside>
</div>

SCSS

$sidebar-width: 200px;
$header-height: 60px;
$activity-sidebar-width: 280px;

.slack-container {
  display: grid;
  height: 100vh;
  width: 100%;
  grid-template-areas:
    "sidebar header  header"
    "sidebar messages activity-sidebar";
  grid-template-rows: minmax($header-height, max-content) 1fr;
  grid-template-columns: $sidebar-width auto $activity-sidebar-width;
  > * {
    border: 1px solid black;
  }
}

.sidebar {
  grid-area: sidebar;
}

.header {
  grid-area: header;
}
.messages {
  grid-area: messages;
}
.activity-sidebar {
  grid-area: activity-sidebar;
}