JSFiddle - React, Tailwind, and code Playground

HTML

Menu:
<ul id="menuItems">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#">third</a></li>
</ul>

CSS

ul#menuItems
{
    background:none;
    margin:0;
    padding:0;
    overflow:hidden;
    width:300px;
    background-color:blue;
}

ul#menuItems li
{
    /*display:inline;
   
    margin-left:auto;
    margin-right:auto;
    top:0px;
    height:50px;*/
    display:inline-block;
    list-style:none;
    padding:10px 1%;
    margin:0;
    width:31%;
}

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
ul#menuItems li a
{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    font-weight:bolder;
    color:red;
    /*height:50px;
    line-height:50px;*/
    width:auto;
    display:block;
    text-align:center;
    
}

ul#menuItems li a:hover{
    background-color:red;
    color:blue;
    
}