JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hmenu">
<ul class="menu">
    <li><a href="#"><em>asfd dfs ss fs df</em><span></span></a></li>
<li><a href="#"><em>asfd dfs ss fs df</em><span></span></a></li>
<li><a href="#"><em>asfd dfs ss fs df</em><span></span></a></li>
<li><a href="#"><em>asfd dfs ss fs df</em><span></span></a></li>
<li><a href="#"><em>asfd dfs ss fs df</em><span></span></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;
    height: 50px;
    line-height: 0px;
}
.menu li a span{  vertical-align: middle;display: inline-block; height: 100%; width: 0px; background: #000;}
.menu li a em{  vertical-align: middle;display: inline-block; }
.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;
       vertical-align: middle;
        font            : 12px verdana;
        text-decoration : none;
    height: 50px;
    
    width: 100%;
    
}
.menu a:hover{
        background      : green; 
  
}