JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout">
  <div class="header">
    <div class="header__shadow">
    </div>
    <div class="dropdown-toogle">
      <div class="dropdown-menu">
      </div>
    </div>
  </div>
  <div class="page-wrapper">
    <div class="sidebar">
      <div class="sidebar__shadow">
      </div>
    </div>
    <div class="content">
    <div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies eget erat ac porttitor. Fusce pellentesque, neque id ornare efficitur, sapien urna scelerisque libero, a congue justo ligula at massa. Vestibulum et tortor augue. Sed scelerisque ornare nibh vel scelerisque. Curabitur nisi quam, rhoncus sed risus at, mollis vulputate eros. Aenean molestie nunc sed orci varius iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sit amet aliquet magna, ut sodales ex. Nam eros lorem, aliquet ac fringilla in, suscipit sit amet metus. Nam et felis viverra, cursus risus sit amet, sodales massa. Mauris facilisis sem vel venenatis venenatis. Nullam id tortor mauris. Cras in ornare sem. In at vulputate arcu. Mauris consectetur cursus urna ac imperdiet. Nulla sagittis risus et augue auctor tempus.
</p>
<p>
Proin viverra efficitur odio vel semper. Proin at purus sit amet lorem porta consequat. Duis ac dolor elementum, commodo nibh non, porttitor lacus. Nullam interdum viverra lacus. Proin ornare, mauris at aliquet ultricies, est nunc elementum enim, non ultricies ipsum diam id nisl. Sed gravida quam eu mi ornare, sed gravida augue sagittis. Integer augue quam, consectetur at felis eu, cursus tempor enim. Aliquam cursus malesuada tempus. Fusce a massa efficitur, tincidunt odio quis, hendrerit odio. Proin facilisis a dui eget dapibus. Etiam massa ante, malesuada at feugiat vitae, malesuada vel arcu. Morbi ac bibendum lacus.
</p>
<p>
Mauris mollis volutpat felis eget volutpat. Aenean fringilla elit eu tortor lacinia venenatis accumsan vitae massa. Suspendisse dolor...

CSS

.layout {
  width: 100%;
  height: 100%;
  position: relative;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: blue;
  z-index: 103;
}

.sidebar {
  position: fixed;
  top: 70px;
  left: 0;
  width: 200px;
  background-color: green;
  bottom: 0;
  z-index:101;
}

.content {
  padding-left: 200px;
  height: 8000px;
}

.page-wrapper {
  padding-top: 70px;
  height: 100%;
}

.dropdown-toogle {
  margin-right: 100px;
  float: right;
  position: relative;
  height: 100%;
  width: 50px;
  background-color: yellow;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 400px;
  height: 200px;
  background-color: grey;
  z-index:1000;
}

.header__shadow {
  position: absolute;
  height: 7px;
  left: 200px;
  right: 0;
  top: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%);
}

.sidebar__shadow {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(to right, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%);
}