JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="nav">
    <li class="blue">Change to blue</li>
    <li class="orange">Change to orange</li>
    <li class="pink">Change to pink</li>
    
    <li class="green">Change to green</li>
</ul>

CSS

#nav { border: 3px solid grey;  }
#nav li { cursor:pointer; }

#nav.blue {
    border: 3px solid blue;
}

#nav.orange {
    border: 3px solid orange;
}

#nav.pink {
    border: 3px solid pink;
}


#nav.green {
    border: 3px solid green;
}

JavaScript

$('#nav li').on("click", doThis);

function doThis() {
    
    $(this)
        .parent('#nav')
        .removeClass()
        .addClass( 
            $(this).attr('class') 
        );

}