JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

CSS

li {
    display: inline;
}

li a {
    color: #dd9999;
    border-bottom:1px dashed #dd9999;
    text-decoration: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

li a:hover {
    padding-bottom: 3px;
}

li a.active {
    background: Red;
    color: White;
    text-shadow:0 -1px 0 #dd9999;
    padding:5px;
}

JavaScript

$(document).ready(function() {
    $('li a').click(function() {
        $(this).toggleClass('active');
    });
});