JSFiddle - React, Tailwind, and code Playground

HTML

<li class="menu-item">
        <a href="#">About</a>
        <a href="#">Home</a>
    </li>

CSS

.menu-item{
            list-style:none;
        } 
        .menu-item a{
            padding:20px;
            padding-bottom:10px;
            border:1px solid #1B3E70;
            color:#1B3E70;
            text-decoration:none;
        }.menu-item a:hover{
                background-color:#1B3E70;
            color:white;
        }
        .menu-item .active{
             background-color:#1B3E70;
             color:white;
        
        }

JavaScript

$('.menu-item a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        });