JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div id="root">
  <div id="header">
    <h1>M</h1>
  </div>
  <div id="nav">
    <div id="logo">
      <img src="https://placekitten.com/g/140/60" />
    </div>
    <div id="menu">
      <h2>Apple Pie</h2>
      <h2>Key Lime Pie</h2>
      <h2>Banana Pudding</h2>
      <h2>Fudge</h2>
      <h2>Funnel Cake</h2>
      <h2>Cheesecake</h2>
      <h2>Frozen Yogurt</h2>
      <h2>Oreo Ice Cream Cake</h2>
      <h2>Cherry Pie</h2>
      <h2>Ladyfinger</h2>
      <h2>Lemon Meringue Pie</h2>
      <h2>Cinnamon Roll</h2>
      <h2>Strawberry Ice Cream</h2>
      <h2>Eclair</h2>
      <h2>Devil's Food Cake</h2>
      <h2>Custard Tart</h2>
      <h2>Sundae</h2>
      <h2>Banana Split</h2>
      <h2>Boston Cream Pie</h2>
      <h2>Apple Crisp</h2>
      <h2>Red Velvet Cupcake</h2>
      <h2>Chocolate Chip Cookie</h2>
      <h2>Donut Hole</h2>
      <h2>Creme Brulee</h2>
    </div>
    <div id="nav-fixed">
      <button>Dashboard Button</button>
    </div>
  </div>
  <div id="body">
    <div id="body-widther">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nunc nisi, consequat et sagittis ac, lobortis id arcu. Maecenas facilisis lacus a vestibulum lacinia. Ut cursus risus eget nibh ornare condimentum. Sed pellentesque ultricies purus, sit amet semper mauris maximus sit amet. In scelerisque nibh accumsan, semper tellus ut, malesuada arcu. Pellentesque dapibus velit id purus mattis, et venenatis est finibus. Praesent commodo justo eros, sed scelerisque ligula dignissim ac. Ut nisi ex, sollicitudin vel lacus sed, facilisis pulvinar ex. Aenean tincidunt rhoncus quam, sed congue quam dignissim cursus. Aliquam ac maximus ex. Nunc lacinia venenatis mauris, ac pharetra mi fermentum non. Praesent nibh velit, tristique a nibh non, rhoncus scelerisque dui. Quisque consectetur non elit nec tempor.</p>
    <p>Fusce ultrices sapien sit amet dui ornare interdum. Pellentesque sit amet est arcu. Mauris congue vitae lectus nec dapibus. Praesent eget porta sem....

CSS

body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
#root {
  background-color: lime;
  height: 100vh;
  overflow: auto;
}
#header {
  padding: 10px 20px;
  height: 100px;
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
  z-index: 1;
  position: relative;
}
#nav {
  background-color: lightgray;
  height: 100vh;
  width: 200px;
  position: sticky;
  top: 0;
  float: left;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
}
#body {
  background-color: white;
  margin-left: 200px;
  overflow: hidden;
  /* border: 1px solid red; */
  overflow: auto;
}
#body-widther {
  padding: 20px;
  min-width: 1000px;
  /* border: 1px solid lime; */
}
#menu {
  padding: 20px;
  flex: 1;
  /* background-color: yellow; */
  overflow: auto;
}
#nav-fixed {
  padding: 20px;
  background-color: lightgray;
  position: sticky;
  bottom: 0;
}
#logo {
  padding: 20px;
  /* background-color: lightgreen; */
  position: sticky;
  top: 0;
}