JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="home.html">Home2</a></li>
    <li><a href="home.html">Home3</a></li>
    <li><a href="home.html">Home4</a></li>
    <li><a href="home.html">Home5</a></li>
    <li><a href="home.html">Home6</a></li>
</ul>
</div>

CSS

div.menu { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width:70%;
    text-align:center;
    background:#FBB117;
    overflow:hidden;
} 
 div.menu ul{ 
    font-family: Verdana; 
    font-size:14px;
    margin:0 3px;
    width: 100%; 
    padding:0;
    
  } 
 div.menu li{ 
    margin:10px 0;  
    float:left; 
    border-left:1px solid #fff; 
} 
 div.menu li a{ 
    text-decoration:none; 
    line-height:29px;
    padding:0 10px;
    background:#FBB117; 
    color:#4C4646; 
    text-align:center;
display:inline-block; 

   
   }
div.menu li:first-child{
    border-right:solid 0px #fff;
}
 div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 }