JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<li class="menu-item">
            <a href="#">Home</a>
            <a href="#">jerome</a>
            <a href="#">ibrahim</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');
});