JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li><a href="#" class="active">Web Design</a></li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Google Search Optimization</a></li>              
    </ul>
</div>

CSS

ul#menu {
    list-style: none;
}

#menu li {
    display: block;
    float: left;
}
            
#menu a {
    display: block;
    margin: 0 0.5em;
    padding: 15px 0 7px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font: 13px/18px Arial, Helvetica, sans-serif;
    font-weight: 300;    
}

#menu a:hover {
    color: #000;
    padding-bottom: 4px;
    border-bottom: 3px solid #f00;
}

.active{
    padding-bottom: 3px;
    border-bottom: 3px solid #f00;
}

JavaScript

// menu with hover-underline block