JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<div>
    <ul class="menu">
        <li class="active"><a href='#'>example1</a></li>
        <li class="normal"><a href='#'>example2</a></li>  
    </ul> 
</div>

CSS

a, a:visited{ color:#fff; text-decoration: none;}
a:hover{ text-decoration: underline;}
li{ padding: 5px 10px; border: 1px solid #eee; float: left;}
.active { background-color: red; }
.normal { background-color: blue; }

JavaScript

$(document).ready(function() {
    $(".menu li").click(function() {
        $(".menu li").removeClass("active").addClass("normal");
        $(this).removeClass("normal").addClass("active");
    });
});