JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="red"></li>
<li class="blue"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
CSS
ul li {
display: inline-block;
width: 20px;
height: 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
JavaScript
$('ul li').on('click', function() {
$(this).closest('ul').removeAttr('class').addClass($(this).attr('class'));
});