JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<ul>
   

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

CSS

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

JavaScript

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