JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#home" role="tab" data-toggle="tab">Link 1</a></li>
            <li><a href="#link2" role="tab" data-toggle="tab">Link 2</a></li>
            <li><a href="#link3" role="tab" data-toggle="tab" id="cars" onclick="changeColor('cars'); return false;">Link 2</a></li>
            <li><a href="#link4" role="tab" data-toggle="tab" >Link 3</a></li>
          </ul>

CSS

#cars
{
    color: #FFF; 
    background: #ec7501;
    background: -moz-linear-gradient(top, #ec7501 1%, #c46200 56%, #ec7501 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ec7501), color-stop(56%,#c46200), color-stop(100%,#ec7501));
    background: -webkit-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: -o-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: -ms-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
    background: linear-gradient(to bottom, #ec7501 1%,#c46200 56%,#ec7501 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec7501', endColorstr='#ec7501',GradientType=0 );
    border-top: 2px solid #de9d5b;
    border-bottom: 2px solid #a64800;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.activeTab
{
    color:#000 !important;
    background:#FFF !important;
}

JavaScript

$('.nav-tabs').on('click','li', function(e) {
    
    $('.nav-tabs li.active').removeClass("active");
    $(this).addClass("active");
});