JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<div class="control-bar-nav">
    <div class="control-bar-nav-wrapper">
        <ul>
            <li class="applications active">
                <a href="#">Applications</a>
            </li>
            <li class="communities">
                <a href="#">Communities</a>
            </li>
            <li class="friends">
                <a href="#">Friends</a>
            </li>
            <li class="administration">
                <a href="#">Administration</a>
            </li>
        </ul>
    </div>
</div>

<div class="slider-wrapper-container">
    <div id="Applications" class="slider-wrapper active"></div>
    <div id="Communities" class="slider-wrapper"></div>
    <div id="Friends" class="slider-wrapper"></div>
    <div id="Administration" class="slider-wrapper"></div>
</div>

CSS

.control-bar-nav-wrapper > ul > li > a {
    color: red;
}
.control-bar-nav-wrapper > ul > li.active > a {
    color: green;
}

.slider-wrapper-container .slider-wrapper {
    background: red;
    height: 50px;
    margin-bottom: 5px;
    width: 50px;
}
.slider-wrapper-container .slider-wrapper.active {
    background: green;
}

JavaScript

$(".control-bar-nav-wrapper ul li").on("click", function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".slider-wrapper-container > div").eq($(this).index()).addClass("active").siblings().removeClass("active");
});