JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" class="tab-item"><a href="">Active Section</a></li>
<li data-tab-item="2" class="tab-item"><a href="">Item Two</a></li>
<li data-tab-item="3" class="tab-item"><a href="">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" class="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" class="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" class="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div class="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" class="tab-item"><a href="">Active Section</a></li>
<li data-tab-item="2" class="tab-item"><a href="">Item Two</a></li>
<li data-tab-item="3" class="tab-item"><a href="">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" class="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" class="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" class="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

JavaScript

$(document).ready(function() {

    $(".tab-item").on('click',function(e){
    		e.preventDefault();
        if( $(this).hasClass('active') ) return false;
        $('.tab-item').removeClass('active');
        $(this).addClass('active');
    });
});