JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#"> Menu 1</a>
    </li>
    <li class="active"><a href="#"> Menu 1</a>
    </li>
    <li><a href="#"> Menu 1</a>
    </li>
    <li><a href="#"> Menu 1</a>
    </li>
</ul>

CSS

ul.nav {
    list-style-type: none;
}
li {
    display:block;
    float:left;
    line-height: 26px;
    margin-right:10px;
    background-color:#ccc;
    padding:4px 10px;
    border-bottom: 5px solid transparent;
}
li a{
    text-decoration:none;
    color:#000;
   
}
li:hover, li.active {
    border-bottom: 5px solid red;
}