JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul id="tabs-titles">
    <li class="current">
        first
    </li>
    <li>
        second
    </li>
    <li>
        third
    </li>
</ul>
<ul id="tabs-contents">
    <li>
        <div class="content">first content first content first content</div>
    </li>
    <li>
        <div class="content">second content</div>
    </li>
    <li>
        <div class="content">third content</div>
    </li>
</ul>

CSS

#tabs-titles{
    float:left;
    margin-right:10px;
}
#tabs-titles li{
    cursor:pointer;
}
#tabs-titles li.current{
    font-weight:bolder;
}
#tabs-contents{
    background:#F2F2F2;
    margin-left:100px;
    padding:5px;
}
#tabs-contents li{
    display:none;
}
#tabs-contents li:first-child{
    display:block;
}

JavaScript

var tabs = $('#tabs-titles li'); //grab tabs
var contents = $('#tabs-contents li'); //grab contents

tabs.bind('click',function(){
  contents.hide(); //hide all contents
  tabs.removeClass('current'); //remove 'current' classes
  $(contents[$(this).index()]).show(); //show tab content that matches tab title index
  $(this).addClass('current'); //add current class on clicked tab title
});