JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="tabs">
    <ul>
        <li class="active"><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
        <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab4" class="tab-content">hello Tab 4</div>
    <div id="tab5" class="tab-content">Tab 5 </div>
    <div id="tab6" class="tab-content">Tab 6 </div>
</div>

<div class="tabs">
    <ul>
    <li class="active"><a href="#tab40">Tab 4</a></li>
    <li><a href="#tab50"><div class="alert-icon">Tab 5</div></a></li>
    <li><a href="#tab60"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab40" class="tab-content">foo Tab 4</div>
    <div id="tab50" class="tab-content">Tab 5 </div>
    <div id="tab60" class="tab-content">Tab 6 </div>
</div>

CSS

.current {
    border:1px solid red;
}

JavaScript

$(document).ready(function(){
    $(".tabs li").click(function() {
        $(this).parent().parent().find(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        $(this).parent().find("li").removeClass('current');
        $(this).addClass("current");
        return false;
    });
});