JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hmenu">
<ul class="menu">
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>

</ul>
</div>

CSS

#hmenu { background:red; border-radius: 8px;}

ul.menu{

        margin          : 0;
        padding         : 0;
        display         : table;
        width           : 100%;
    height: 50px;
}
.menu li{
        display         : table-cell;
        width           : 20%;
        border-left    : 1px solid #fff;
        text-align:center;
    vertical-align: middle;
}

.menu li:first-child{border-left:0px;}        
        

*html .menu li{
        display         : inline;
        zoom            : 1;

}
.menu a:link, .menu a:hover, .menu a:visited{
        display         : block;
       
        font            : 12px verdana;
        text-decoration : none;
    height: 50px;
}
.menu a:hover{
        background      : green; 
  
}