JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="a" class="item">Ольга</li>
    <li id="b" class="item">Света</li>
    <li id="c" class="item">Света</li>
</ul>

CSS

li {
    list-style: none;
    background: gray;
    margin-bottom: 3px;
    height: 120px;
    padding-left: 130px;
    line-height: 120px;
}
a {
    display: block;
    height: 100%;
    color: #fff;
    text-decoration: none;
   
}

#a.active {
    background: blue url(http://s1.iconbird.com/ico/0612/Birdies/w128h1281339416132sunbird3.png) no-repeat 0 0;
}
#b.active {
    background: red url(http://s1.iconbird.com/ico/0612/Birdies/w128h1281339416132sunbird3.png) no-repeat 0 0;
}
#c.active {
    background: green url(http://s1.iconbird.com/ico/0612/Birdies/w128h1281339416132sunbird3.png) no-repeat 0 0;
}

JavaScript

var items = document.querySelectorAll('.item');

Array.prototype.forEach.call(items, function(curr){
    
    curr.addEventListener('click', function() {
        
        var currActive = this.parentNode.querySelector('.active');
        
        if (currActive) currActive.classList.remove('active');        
        this.classList.add('active');
        
    }, false);
    
});