JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<i>Please click an item:</i>

<ul class="menu">
  <li><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

CSS

body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:red;
    font-weight:bold;
    color:#ffffff;
}

JavaScript

$('.menu li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});