JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_top">
        <ul>
              <li><a href="index.php">All Clients</a></li>
              <li id="branch"><a href="#">Branches</a>  </li>   
              <li><a href="#">Board</a></li>
              <li><a href="#">Working</a></li>
              <li><a href="#">New Client</a></li>
         </ul>                                               
</div>

<div id="Client_list"> 
</div>
<div id="dop"> 
</div>
<div id="Baner">
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 1024px;   
}
#menu_top {
    background-color: #5db22f;
    border-bottom: 1px solid black;
    overflow: hidden;
    }

#menu_top ul li {
    float: left;
    list-style:none;
}

li a {
    display:block;
    font:18px Georgia, Arial, sans-serif;
    color:#fff;
    text-decoration:none;
    padding:15px 30px 15px 30px;  
    }
 #menu_top ul li a:hover {
    color: black;
    text-shadow:gray 1px 1px 1px ;
    }
#Client_list {
    width:290px;
    background-color: #484d4c;
    height: 200px;    
    overflow: auto;
    border-bottom: 2px solid black; 
    border-top:2px solid black;
    border-right: 2px solid black;
    float:left;
}
#dop {
    width:290px;
    background-color: #369;
    height: 310px;    
    overflow: auto;
    border-bottom: 2px solid black; 
    border-top:2px solid black;
    border-right: 2px solid black;
    float:left;
}
#Baner {
    width:290px;
    background-color: blue;
    height: 100%; 
    position: fixed;       
    overflow: auto;  
    border-right: 2px solid black;
    margin: 200px 0 0 0;
}