JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="layout">
  <div class="sidebar">
    <slot name="sidebar"></slot>
  </div>
  <div class="header">
    <slot name="header"></slot>
  </div>
  <div class="messages">
    <slot name="messages"></slot>
  </div>
  <div class="right-sidebar"></div>
</div>


<main-layout>
  <div v-slot="sidebar">
    .....
  </div>
</main-layout>

SCSS

.layout {
  height: 100vh;
  background-color: gray;
  display: grid;
  grid-template-areas:
   'sidebar  header  header'
   'sidebar messages right-sidebar';
   
  grid-template-rows: 50px 1fr;
  grid-template-columns: 200px 1fr 100px;
}

.sidebar {
  grid-area: sidebar;
  background-color: violet;
  overflow-y: auto;
}
.header {
  grid-area: header;
  background-color: #fff;
}
.messages {
  grid-area: messages;
  background-color: yellow;
  overflow: hidden;
}
.right-sidebar {
  grid-area: right-sidebar;
  background-color: orange;
}