JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li class="item green">Раз</li>
        <li class="item green">Два</li>
        <li class="item green">Три</li>
        <li class="item green">Четыре</li>
        <li class="item green">Пять</li>
</ul>

CSS

.item {
    list-style-type: none;
}
.item:hover {
    background-color: #b55;
}
body {
    line-height: 1.5rem;
}
.green {
    background-color: #5b5;
}
.blue {
    background-color: #55b;
}

JavaScript

function addClass(el, addClass) {
    var oldClassName = (el.hasAttribute('class')) ?el.getAttribute('class') : '';
    if (oldClassName.indexOf(addClass) > -1) return;
    var newClassName = oldClassName + ' ' + addClass;
    el.setAttribute('class', newClassName);
}

function removeClass(el, removeClass) {
    var oldClassName = (el.hasAttribute('class')) ? el.getAttribute('class') : '';
    var indexOfClass = oldClassName.indexOf(removeClass);
    if (indexOfClass < 0) return;
    var newClassName = oldClassName.slice(0, indexOfClass) + 
            oldClassName.slice(indexOfClass + removeClass.length);
    el.setAttribute('class', newClassName);
}

    var items = document.getElementsByClassName('item');
    for (var i=0; i < items.length; i++) {
        items[i].addEventListener('click', function(){
            var items = document.getElementsByClassName('item');
            for (var i=0; i < items.length; i++) {
                //removeClass(items[i], 'blue');
                items[i].style['background-color'] = '';
            }
            //addClass(this, 'blue');
            this.style['background-color'] = '#55b';
        });
    }