JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#jamell">Jamell</a></li>
<li><a href="#eric">Eric</a></li>
<li><a href="#irma">Irma</a></li>
<li><a href="#paulette">Paulette</a></li>
<li><a href="#christian">Christian</a></li>
</ul>
<div class="tab-content">
<div id="jamell" class="tab active">
My name is Jamell
</div>
<div id="eric" class="tab">
<p>My name is Eric</p>
</div>
<div id="irma" class="tab">
<p>My name is Irma</p>
</div>
<div id="paulette" class="tab">
<p>My name is Paulette</p>
</div>
<div id="christian" class="tab">
<p>My name is Christian</p>
</div>
</div>
</div>
CSS
.tabs {
width:100%;
display:inline-block;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
list-style:none;
float:left;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#404040;
font-size:16px;
color:#FFFFFF;
transition:all linear 0.15s;
text-decoration:none;
}
.tab-links a:hover { background-color:#006FC9; }
li.active a, li.active a:hover{background:#fff; color:#4c4c4c; }
.tab-content {
padding:5px;
border-radius:10px 10px 0px 0px;
box-shadow:#747474 -1px 1px 1px;
background:#9E9E9E; height:300px;
}
.tab {display:none;}
.tab.active { display:block;}
JavaScript
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});