JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<hr>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
    <p>This is the 2nd tab.</p>
    <ul class='tabs2'>
        <li><a href='#tab2-1'>Tab 2 → 1</a></li>
        <li><a href='#tab2-2'>Tab 2 → 2</a></li>
        <li><a href='#tab2-3'>Tab 2 → 3</a></li>
    </ul>
    <div id='tab2-1'>
        <p>This is Tab 2 → <strong>1</strong>.</p>
    </div>
    <div id='tab2-2'>
        <p>This is Tab 2 → <strong>2</strong>.</p>
    </div>
    <div id='tab2-3'>
        <p>This is Tab 2 → <strong>2</strong>.</p>
        <ul class='tabs2-3'>
            <li><a href='#tab2-3-1'>Tab 3 → 3 → 1</a></li>
            <li><a href='#tab2-3-2'>Tab 3 → 3 → 2</a></li>
        </ul>
        <div id='tab2-3-1'>
            <p>This is Tab 2 → 3 → <strong>1</strong>.</p>
        </div>
        <div id='tab2-3-2'>
            <p>This is Tab 2 → 3 → <strong>2</strong>.</p>
        </div>
    </div>
</div>
<div id='tab3'>
    <p>And this is the 3rd tab.</p>
</div>

CSS

ul {
    margin: 10px 0;    
}
ul li {
    display: inline;
    margin-right: 10px;
    padding: 5px;
}
ul li.active {
    background: #333;
    color: #fff;
}
ul li.active * {
    color: #fff;
}

#tab2 > div {
    color: purple;
    font-size: 0.8em;
    margin-left: 10px;
}
#tab2-3 > div {
    color: green;
    margin-left: 10px;
}
strong {
    font-weight: bold;
}

JavaScript

$.fn.myTabs = function() {

    return this.each(function() {
        
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);        
        if ($active = '') {
            $content = $($active.attr('href'));
        }
        $active.parent('li').addClass('active');
        
        if ($active.parent('li').parent('ul').hasClass('tabs')) {
            alert ("tab");
        }
        if ($active.parent('li').parent('ul').hasClass('tabs2')) {
            alert ("tab2");
        }
        if ($active.parent('li').parent('ul').hasClass('tabs3')) {
            alert ("tab3");
        }
        

        // Hide the remaining content
        $links.not($active).each(function () {
                $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.parent('li').removeClass('active');
                $content.hide();
        

                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.parent('li').addClass('active');
                $content.show();
        

                // Prevent the anchor's default click action
                e.preventDefault();
        });
    });

};


$('.tabs, .tabs2, .tabs2-3').myTabs();