JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#" id="btn1"></a>
        </li>
        <li><a href="#" id="btn2" class="active"></a>
        </li>
    </ul>
</nav>

CSS

nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
/* sprite menu animations */
 nav a {
    background-image:url('http://tinuska.vibraflex.cz/img/menuSprite.png');
    display:inline-block;
    height:82px;
}
nav a#btn1 {
    background-position:0px 0px;
    width:82px;
}
nav a#btn1:hover {
    background-position:0px -82px;
}
nav a#btn1.active {
    background-position:0px -164px;
}
nav a#btn2 {
    background-position:-108px 0px;
    width:82px;
}
nav a#btn2:hover {
    background-position:-108px -82px;
}
nav a#btn2.active {
    background-position:-108px -164px;
    outline: none;
}

JavaScript

$("nav li").click(function ( e ) {
    e.preventDefault();
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    // $(activeTab).show(); //Fade in the active content  
});