JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div class="app">
  <aside>sidebar</aside>
  <div>
    <header>header</header>
    <div>content</div>
  </div>
</div>

SCSS

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.app {
   position: relative;
   display: flex;
   background-color: rgba(255, 0, 0, 0.5);
   max-width: 1600px;
   min-width: 1280px;
   height: 100%;
   margin: 0 auto;
   flex: 1;
   overflow-x: auto;
}

.app > aside, .app > div {
  margin: 0 12px;
}

.app > aside {
  margin: 0 12px;
  flex: 2;
  background-color: rgba(0, 0, 0, 0.1);
}

.app > div {
  display: flex;
  flex-direction: column;
  flex: 24;
  margin: -12px 12px;
}

.app > div > header {
  height: 128px;
}

.app > div > header, .app > div > div {
  margin: 12px 0;
  background-color: rgba(0, 0, 0, 0.1);
}

 .app > div > div {
  flex: 1;
}