JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs">
    <li id="tab-1"><a  class="active" href="#"></a></li>
    <li id="tab-2"><a href="#"></a></li>
    <li id="tab-3"><a href="#"></a></li>
</ul><!-- /tabs -->

CSS

ul#tabs {
    margin: 30px;
    padding: 0;
    width: 956px;
    }

#tabs li {
    list-style-type: none;
    display: inline-block;
    zoom:1;
    *display:inline;
    margin: 0;
    padding: 0;
    }

#tabs li a{
    width: 316px;
    height: 43px;
    display: inline-block;
    zoom:1;
    *display:inline;
    margin: 0;
    margin-right: 1px;
    padding: 0;
    }

#tabs li#tab-1 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 0;
    }

#tabs li#tab-2 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 -43px;
    }

#tabs li#tab-3 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 -86px;
    }

#tabs li#tab-1 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 0;    
    }

#tabs li#tab-2 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 -43px;    
    }

#tabs li#tab-3 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 -86px;
    }

#tabs li#tab-1 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 0;    
    }

#tabs li#tab-2 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 -43px;    
    }

#tabs li#tab-3 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 -86px;
    }

JavaScript

$('#tabs li').click(showThisBanner);

function showThisBanner() {
    currentBanner = ($(this).index() + 1);
    $("#tabs li a").removeClass("active");
    $("#tabs li a").eq(currentBanner-1).addClass("active");
    }