JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>item 1(click)</li>
    <li>item 2(click)</li>
    <li>item 3(click)</li>
    <li>item 4(click)</li>
</ul>

CSS

.active{
    color:#faa619;
}
li{
    transition:all .5s;
    cursor:pointer;
}

JavaScript

var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
    lis[i].onclick = function(){
        if(active = this.parentNode.querySelector('.active')){
            active.classList.remove('active');
            this.classList.add('active');
        }
        else
            this.classList.add('active');
    }
}