JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tabs-1" class="tabContent" >Tab1 info 1 content</div>
<div id="tabs-2" class="tabContent">Tab1 info 2 content</div>
<div id="tabs-3" class="tabContent" >Tab1 info 3 content</div>
<ul class="side bar tabs">
<li class="tabClicker" data-tab="tabs-1">Tab1 info 1</li>
<li class="tabClicker" data-tab="tabs-2" >Tab1 info 2</li>
<li class="tabClicker" data-tab="tabs-3">Tab1 info 3</li>
</ul>
CSS
.tabContent {
display:none;
}
JavaScript
$(function() {
$(".tabClicker").click(function() {
var tab = $(this).attr("data-tab");
$(".tabContent").hide();
$("#" + tab).show();
});
});