JSFiddle - React, Tailwind, and code Playground

by Nanang Mahdaen El Agung

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <ul class="nav nav-pills nav-justified car-nav">
            <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem
                ipsum dolor sit</small></a></li>
            <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum
                dolor sit</small></a></li>
            <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum
                dolor sit</small></a></li>
            <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum
                dolor sit</small></a></li>
        </ul>
<br />
<button>Add Effect To Active Class</button>

CSS

.nav a small
{
    display: block;
}

.nav-pills>li[data-slide-to="0"].active a {background: 0 !important;  color: #333 !important;  box-shadow: none !important;  -webkit-box-shadow: none !important;}
.nav-pills>li[data-slide-to="1"].active a {background: 0 !important;  color: #333 !important;  box-shadow: none !important;  -webkit-box-shadow: none !important; }
.nav-pills>li[data-slide-to="2"].active a { background: 0 !important;  color: #333 !important;  box-shadow: none !important;  -webkit-box-shadow: none !important; }
.nav-pills>li[data-slide-to="3"].active a { background: 0 !important;  color: #333 !important;  box-shadow: none !important;  -webkit-box-shadow: none !important; }

.active:after {
    content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
}
.sliding-middle-out:after {
    width: 100%;
	background: blue;
}

JavaScript

$("button").click(function(){
        $(".active").addClass("sliding-middle-out");
    });