JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
<li class="tab">
    <span>tab1</span>
    <div class="tab-content">content1</div>
</li>
<li class="tab">
    <span>tab2</span>
    <div class="tab-content">content2</div>
</li>
<li class="tab">
    <span>tab3</span>
    <div class="tab-content">content3</div>
</li>
</ul>

CSS

.tabs{
position:relative;   
}

.tab{
display:inline-block;        
}

.tab>span{
cursor:pointer;
}

.tab>span.selected{
background:black;
color:white;
}

.tab-content{
display:none;
position:absolute;
left:0;
top:18px;
background:black;
color:white;
width:100%
}

JavaScript

$(document).ready(function(){
    $('.tab-content:first').show(0);
    $('.tab:first>span').addClass('selected');
    $('.tab>span').click(function(){
       $('.tab>span').removeClass('selected');
       $(this).addClass('selected'); 
       $('.tab-content').hide(0);   
       $(this).next('.tab-content').show(0);     
    });
});