JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <div class="app">
      <div class="main-panel">


        <nav class="navbar"></nav>
        <div class="sidenav">
          <ul>
            <li>First</li>
            <li>2nd</li>
            <li>3rd</li>
            <li>4th</li>
          </ul>
        </div>
        <div class="page-container">
          <div class="placeholder">
            <ul>
              <li>First</li>
              <li>2nd</li>
              <li>3rd</li>
              <li>4th</li>
            </ul>
          </div>
          <input type="text">
        </div>
      </div>
    </div>
  </body>

</html>

SASS

html, body
  height: 100%
  width: 100%
  position: fixed
  overflow: visible
.app
  background-color: rgb(244, 245, 248)
  height: 100%
  overflow-x: hidden
  overflow-y: auto
.main-panel
  height: 100%
  display: grid
  grid-template-columns: 210px 1fr
  grid-template-rows: 76px 1fr
.navbar
  grid-column: 1 / 3
.page-container
  overflow-y: auto
  overflow-x: hidden
.placeholder
  display: block
  height: 500px
  width: 100%
  //background-color: black