JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="header">
header
</div>
<div class="wrapper">
  <div class="content">
  content
  </div>
  <div class="sidebar">
    Sidebar
  </div>
</div>
<div class="backdrop">

</div>

CSS

html, 
body {
  margin: 0;
  height: 100%;
}
.header {
  Height: 80px;
  background-color: #bbbbbb;
  
}
.wrapper {
    height: calc(100% - 80px);

}
.content {
  width: calc(100% - 300px);
  Display: inline-block;
  height: 100%;

  
}
.sidebar {
  width: 296px;
  Display: inline-block;
  background-color: red;
  height: 100%;
 
}

.backdrop {
  display:none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0 ,0,0,0.6);
  top: 0;
  right: 0;
}

@media all and (max-width: 900px) {
  .content {
    width: 100%;
  }
  .sidebar {
    Position: fixed;
    width: 280px;
    top: 0;
    right: 0px;
    height: 100%;
    z-index: 2;
  }
  .backdrop {
    display: block;
    z-index: 1;
  }
}