JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<h1>G5 Tabs</h1>

    <div class="tabs">
        
        <ul>
            <li class="active"><a href="#" class="first headlink">Tab One</a></li>
            <li><a href="#" class="headlink">Tab Two</a></li>
            <li><a href="#" class="headlink">Tab Three</a></li>
            <li><a href="#" class="last headlink">Tab Four</a></li>
        </ul>

        <section class="tab-content">
            
            <article class="active">
                <h6>Tab One Content</h6>
                <p>copy here</p>
            </article>
            
            <article>
                <h6>Tab Two Content</h6>
                <p>copy here</p>
            </article>
            
            <article>
                <h6>Tab Three Content</h6>
                <p>copy here</p>
            </article>
            
            <article>
                <h6>Tab Four Content</h6>
                <p>copy here</p>
            </article>
            
        </section><!--end .tab-content-->
        
    </div><!--end .tabs-->

CSS

h1 { font-size: 16px; margin: 0 0 12px 0; }

/* Content // Tabs */ 
.tab-content { min-height: 100px; overflow: hidden; }

.tabs ul { margin: 0 0 10px 0; overflow: hidden; }
.tabs li { float: left; }
.tabs li .headlink { background: #f7f7f7; display: block; padding: 4px 8px; margin: 0 8px 0 0; text-decoration: none; }
.tabs li .last { margin-right: 0; }

.tabs .active .headlink { font-weight: bold; }

.tab-content article { display: none; margin: 0; padding: 0; }
.tab-content .active { display: block; }

JavaScript

//G5 Tabs
var g5Tabs = function(){

    //Store Variables
    var $tabs = $('.tabs'),
        $tabLink = $tabs.find('.headlink'),
        $tabContent = $tabs.find('.tab-content article');

    //Show First Section
    $tabContent.first().fadeIn('slow').addClass('active');

    //Tab Functionality
    $tabLink.on('click', function(event){

        var _this = this,
            _li = $(_this).parent();

        if ( !_li.is('.active') ) {

            _li.addClass('active').siblings('li').removeClass('active');
            
            $tabContent.hide().removeClass('active').eq(_li.index()).fadeIn('slow').addClass('active');
        
        };

        event.preventDefault();

    });

};

//Ready
$(document).ready(function(){

    //Init. G5 Tabs
    g5Tabs();

});