JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div class="menu-main-container">
    <ul id="menu-main" class="menu">
        <li id="menu-item-1"> <a href=#>Item1</a>

        </li>
        <li id="menu-item-2"> <a href=#>Item2</a>

        </li>
        <li id="menu-item-3"> <a href=#>Item3</a>

        </li>
        <li id="menu-item-4"> <a href=#>Item4</a>

        </li>
    </ul>
</div>

CSS

.menu-main-container {
    border:1px solid #ccc;
    display: inline-block;
    width:100%;
}
#menu-main {
    padding : 0;
    margin : 0;
    white-space : nowrap;
    font-size : 0;
    position : relative;
    height : 100%;
}
#menu-main * {
    font-size : 16px;
    list-style-type : none;
    padding : 0;
    margin : 0;
}
#menu-main a {
    text-transform : capitalize;
    text-decoration : none;
    color : #000000;
    display : block;
}
#menu-main > li {
    display : inline-block;
    width : 16.6%;
    text-align : center;
    float : left;
    padding-top:5%;
    padding-bottom:5%;
}
#menu-main > li:hover {
    background-color : #003cb3;
}