JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li class="active">Option 1</li>
	<li>Option 2</li>
	<li>Option 3</li>
</ul>

CSS

ul{
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 13px;
}
li{
	display: inline-block;
	vertical-align: top;
	/* width: 25px; */
	padding: 3px 5px;
	margin-right: 10px;
	background-color: #ccc
}

.active{
	background-color: magenta;
	color: white;
}

JavaScript

$('li').on('click', function(){
    // Remove the `active` class from all existing li elements
    $('li').removeClass('active');
    // Add the `active` class just to the one we clicked on
    $(this).addClass('active');
});