JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<ul>
	<li class="active"><a href="">Tab 1</a></li>
	<li><a href="">Tab 2</a></li>
	<li><a href="">Tab 3</a></li>
	<li><a href="">Tab 4</a></li>
	<li><a href="">Tab 5</a></li>
</ul>

CSS

ul{ margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ddd; 
}
ul:before, ul:after{
    content: ""; display: table; clear: both;
}
ul:after{
    clear: both;
}
/**/
ul li{ float: left; margin: 0 4px -1px 4px;  }
ul li a{ display: block; text-decoration: none; padding: 10px 15px; 
    border: 1px solid transparent; background: transparent;  
}
ul li a:hover{
    background: #eee;
}
ul li.active a{ border: 1px solid #ddd; border-bottom: 1px solid transparent; background: #fff; 
    border-radius: 4px 4px 0 0;
}

JavaScript

$(function(){
    $('li a').on('click', function(e){
        e.preventDefault();
        $('li').removeClass('active');
        $(this).parent('li').addClass('active');
    });
});