JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    </ul>

CSS

.menu{width: 300px; height: 25; font-size: 18px;}
      .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
      .menu li:hover, .menu li.active {
            background-color: #f90;
        }

JavaScript

//Attach events to menu

 var make_button_active = function()
    {
      //Get item siblings
      var siblings =($(this).siblings());
      //Remove active class on all buttons
      siblings.each(function ()
        {
          $(this).removeClass('active');
        }
      );
      
      
      //Add the clicked button class
      $(this).addClass('active');
    }   
     
     $(document).ready(function() {
    $(".menu li").click(make_button_active);
});