JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<div class="tab-container">
    <div class="tab-nav">
        <ul>
            <li><a href="">asd</a></li>
            <li><a href="">asd</a></li>
            <li><a href="">asdas</a></li>
            <li><a href="">asdasd</a></li>
        </ul>
    </div>
    <div class="tabs">
        <div>adasdfasdf</div>
        <div>glsdflgdsfg</div>
        <div>şilişli</div>
        <div>pğwotpğeow</div>
    </div>
</div>

<div class="tab-container">
    <div class="tab-nav">
        <ul>
            <li><a href="">asd</a></li>
            <li><a href="">asd</a></li>
            <li><a href="">asdas</a></li>
            <li><a href="">asdasd</a></li>
        </ul>
    </div>
    <div class="tabs">
        <div>adasdfasdf</div>
        <div>glsdflgdsfg</div>
        <div>şilişli</div>
        <div>pğwotpğeow</div>
    </div>
</div>

CSS

.tab-container { width:100%; }
.tab-container .tab-nav { clear:both; width:100%; float:left; }
.tab-container .tab-nav ul { list-style:none; margin:0; padding:0 }
.tab-container .tab-nav ul li { float:left; margin-left:10px; }
.tab-container .tab-nav ul li.active a { text-decoration:none; }
.tab-container .tabs { clear:both; float:left; width:100%; }
.tab-container .tabs > div { display:none; width:100%; }
.tab-container .tabs > div.active { display:block; }

JavaScript

$(".tab-container .tab-nav a").click(function(e){
    if(e.preventDefault){ e.preventDefault(); } else { e.returnValue = false; }
    
    $tabContainer = $(this).closest(".tab-container");
    $tabs = $tabContainer.find(".tabs");
    
    $(this).parent("li").addClass("active").siblings().removeClass("active");
    $eq = $(this).parent().index();
    
    $tabs.find(">div").eq($eq).addClass("active").siblings().removeClass("active");
});

$(".tab-container").find(".tab-nav > ul > li:first-child a").click();