JSFiddle - React, Tailwind, and code Playground

by FlasJunior

HTML

<section id="col_tabs">
    <ul class="tab_nav">
        <li><a href="#product_desc">Beschreibung</a></li>
        <li><a href="#product_detail">Details</a></li>
        <li><a href="#product_info">Info</a></li>
    </ul>
    <div class="tab_content" id="product_desc">Beschreibung</div>
    <div class="tab_content" id="product_detail">Details</div>
    <div class="tab_content" id="product_info">Info</div>
</section>

CSS

#col_tabs .tab_nav, #col_tabs .tab_nav li{margin:0;padding:0;list-style:none;height:30px;}
#col_tabs .tab_nav li{float:left;padding-right:5px;}
#col_tabs .tab_nav li a{
    float:left;
    padding:0 5px;
    color:green; text-decoration:none; background:#ccc;
    line-height:30px;
}
#col_tabs .tab_nav li.selected a{background:red;color:#fff}

#col_tabs .tab_content{
    display:none;
    float:left;
    width:300px;
    clear:both;
    border:1px solid red;
    padding:5px;
}

JavaScript

var $tabNav = $('.tab_nav');
var lastActiveTabId = null;
$tabNav.find("a").on("click", function(){
    var id = $(this).attr("href");
    
    $("#col_tabs .tab_content").hide();
    $(id).show();
    
    $('#col_tabs .tab_nav li').removeClass("selected");
    $('#col_tabs .tab_nav li a[href="'+id+'"]').closest("li").addClass("selected");
    
    return false;    
})
$tabNav.find("a:first").trigger("click");