JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<ul class="tabs">
    <li><a href="#tab1">1</a></li>
    <li><a href="#tab2">2</a></li>
    <li><a href="#tab3">3</a></li>
    <li><a href="#tab4">4</a></li>
</ul>
<br class="clear" />

<div class="tab_container">
    <div id="tab1" class="tab_content active">1</div>
    <div id="tab2" class="tab_content">2</div>
    <div id="tab3" class="tab_content">3</div>
    <div id="tab4" class="tab_content">4</div>
    <br class="clear" />
</div>

<ul class="tabs">
    <li><a href="#tab5">5</a></li>
    <li><a href="#tab6">6</a></li>
    <li><a href="#tab7">7</a></li>
    <li><a href="#tab8">8</a></li>
</ul>
<br class="clear" />

<div class="tab_container">
    <div id="tab5" class="tab_content">5</div>
    <div id="tab6" class="tab_content">6</div>
    <div id="tab7" class="tab_content">7</div>
    <div id="tab8" class="tab_content">8</div>
    <br class="clear" />
</div>

<ul class="tabs">
    <li><a href="#tab9">9</a></li>
    <li><a href="#tabA">A</a></li>
    <li><a href="#tabB">B</a></li>
    <li><a href="#tabC">C</a></li>
</ul>
<br class="clear" />


<div class="tab_container">
    <div id="tab9" class="tab_content">9</div>
    <div id="tabA" class="tab_content">A</div>
    <div id="tabB" class="tab_content">B</div>
    <div id="tabC" class="tab_content">C</div>
    <br class="clear" />
</div>

CSS

.clear { clear: both; }

.tab_container {
    border: 1px dashed black;
    width: 260px;
    margin-bottom: 10px;
}

.tab_content {
    width: 50px;
    height: 50px;
    float: left;
    margin: 10px 0 10px 10px;
    border: 1px solid black;
}

ul.tabs li.active {
    background-color: #cc5;
		display: block !important;
}

ul.tabs li {
    float: left;
    width: 15px;
    text-align: center;
    border: 1px dashed red;
}

.tab_content.active {
			display: block;
}

JavaScript

$(".tab_content").hide();
$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).next('.tab_container').find('.tab_content:first').show();
});

$("ul.tabs li a").click(function() {
    var cTab = $(this).closest('li');
    cTab.siblings('li').removeClass("active");
    cTab.addClass("active");
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide(); 

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});