JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div id="page">
  <div class="left-wrapper">
    <div id="side-menu"></div>
  </div>
  <div class="right-wrapper">
    <div id="top-menu"></div>
    <div id="content"></div>
  </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#page {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: gray;
  overflow: auto;
  display: flex;
}
#content {
  width: 500px;
  height: 100vh;
  background-color: green;
}
#side-menu{
  background-color: blue;
  /* height: 100vh; */
  position:absolute;
  top:0;
  bottom: 0;
  width: 200px;
}
#top-menu{
  background-color: red;
  height: 150px;
  width: 100%;
}
.right-wrapper {
  width: auto;
  background-color: yellow;
}