JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_top">
    <ul>
              <li><a href="#">All Clients</a></li>
              <li><a href="#">Branchs</a></li>
              <li>
                 <ul>
                      <li><a href="#">HO</a></li>                   
                 </ul>
              </li>
              <li><a href="#">Board</a></li>   
        </ul>
 </div>

CSS

#menu_top {
    background-color: #5db22f;
    border-bottom: 1px solid black;
    overflow: auto;
    
}
#menu_top li {
    float: left;
    list-style:none;
}

li a {
    display:block;
    font:18px Georgia, Arial, sans-serif;
    color:black;
    text-decoration:none;
    padding:15px 20px 15px 20px;  
    }

li{
    border-bottom: 1px solid red;
}