JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#" class="iconOne"></a>
    </li>
     <li>
        <a href="#" class="iconTwo"></a>
    </li>
     <li>
        <a href="#" class="iconThree"></a>
    </li>
</ul>

CSS

ul li a { width:134px;
    height:53px;
    display:block;}

.iconOne {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -82px -58px;
   
}
.iconTwo {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -244px -58px;
   
}
.iconThree {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -403px -58px;
 
}

a.iconOne:hover {
    background-position:-82px -123px;
}
li.active a.iconOne:hover, li.active a.iconOne{
    background-position:-82px -188px;
}
a.iconTwo:hover {
    background-position: -244px -123px;
}
li.active a.iconTwo:hover, li.active a.iconTwo {
    background-position: -244px -188px;
}
a.iconThree:hover {
    background-position:-403px -123px;
}
li.active a.iconThree:hover, li.active a.iconThree{
    background-position:-403px -188px;
}

JavaScript

$('li').click(function(){
    $('li').removeClass('active');
    $(this).addClass('active');
    
});