JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="pri" class="nav">
    <li class="active">Fuits</li>
    <li>Meats</li>
    <li>Vegetables</li>

<ul id="sec" class="nav">
    <li>Banana</li>
    <li>Orange</li>
    <li>Apple</li>
    <li>Strawberry</li>
    <li>Grape</li>
</li>
</ul>

CSS

* {
    padding: 0px;
    margin: 0px;
}
ul {
    list-style: none;
}

ul.nav {
    height: 20px;
}
    ul.nav li {
        float: left;
        padding: 4px 12px;
        font-family: Arial, sans-serif;
        font-size: 12px;
        line-height: 12px;
        cursor: pointer;
    }
ul.nav#pri {
    
}
    ul.nav#pri li {
        margin: 0px 4px;
        border-radius: 4px 4px 0px 0px;
        background-color: cyan;
        font-weight: bold;
    }
    ul.nav#pri li.active, ul.nav#pri li:hover {
        background-color: pink;
    }
ul.nav#sec {
    background-color: pink;
}
    ul.nav#sec li:hover {
        background-color: yellow;
    }