JSFiddle - React, Tailwind, and code Playground

by each

HTML

<div class="tab">
    <div class="tabs_header header">
        <ul>
            <li><a href="#contenta">tab 1</a></li>
            <li><a href="#contentb">tab 2</a></li>
            <li class="active"><a href="#contentc">tab 3</a></li>
        </ul>
    </div>
    
    <div class="tabs_contents">
        <div id="contenta" class="content">1</div>
        <div id="contentb" class="content">2</div>
        <div id="contentc" class="content">3</div>
    </div>
</div>

CSS

.active { color: red!important }

JavaScript

$(function() {

    var links    = $('.tabs_header a'),
        contents = $('.tabs_contents').children();
    
    links.each(function() {
       
        var li = $(this).parent();
        
        if(li.hasClass('active'))
         
           $($(this).attr('href')).show(0).add($(this)).addClass('active');

        
    }).click(function(e) {
    
        e.preventDefault();

        contents.hide().add(links).removeClass('active');
        
        $(this).addClass('active');
        
        $($(this).attr('href')).show(0).addClass('active');

    });

    if(!links.filter('.active')) {
        links.eq(0).add(contents.eq(0)).addClass('active');
    }
    
    contents.not('.active').hide(0);
    
});