JSFiddle - React, Tailwind, and code Playground

by Jaydeep Chauhan

HTML

<header>
  <ul>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 4</a></li>
  </ul>
</header>
<div class="main">
   <div class="sidebar">
   </div>
   <div class="content">
   </div>
 </div>

CSS

.main {
  display: flex;
  height: 100vh;
}

.sidebar { 
 width: 200px;
 background: #ddd;
 border-right: 1px solid #d1d1d1;
}

.content {
     background: #f1f1f1;
    flex: 1;
}

header {
  ul {
    list-style: none;
  }
}