JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<section id="wrapper">

<nav class="tab-triggers">
    <a href="" class="active">Tab 1</a>
    <a href="">Tab 2</a>
    <a href="">Tab 3</a>
    <a href="">Tab 4</a>
</nav>
<section class="tabs-content">
    <article class="tab active">
        <p>
            Disrupt direct trade twee single-origin coffee photo booth art party. 3 wolf moon sartorial hella, helvetica bespoke gluten-free pickled. Direct trade pour-over master cleanse, helvetica blog kale chips williamsburg selfies yr sartorial locavore banjo etsy +1. Echo park williamsburg neutra, godard cliche art party before they sold out wes anderson actually pinterest single-origin coffee four loko selvage terry richardson fixie. Thundercats retro small batch sartorial ennui. Actually authentic keffiyeh, hella carles fixie gentrify polaroid wayfarers synth. Mumblecore PBR actually, aesthetic squid pork belly intelligentsia fingerstache.
        </p>
        <p>
        High life sustainable pour-over terry richardson, try-hard 3 wolf moon swag echo park tofu art party synth. Organic master cleanse tofu, farm-to-table chambray gastropub tousled. Ugh squid beard, thundercats banh mi organic intelligentsia fap scenester flexitarian jean shorts meh yr odd future.
        </p>
    </article>

    <article class="tab">
        <p>
        Disrupt direct trade twee single-origin coffee photo booth art party. 3 wolf moon sartorial hella, helvetica bespoke gluten-free pickled. Direct trade pour-over master cleanse, helvetica blog kale chips williamsburg selfies yr sartorial locavore banjo etsy + polaroid wayfarers synth. Mumblecore PBR actually, aesthetic squid pork belly intelligentsia fingerstache.</p>
        <p>
        High life sustainable pour-over terry richardson, try-hard 3 wolf moon swag echo park tofu art party synth. Organic master cleanse tofu, farm-to-table chambray gastropub tousled. Ugh squid beard, thundercats banh mi organic intelligentsia fap scenester flexitarian jean shorts meh yr odd future....

CSS

* {
    margin: 0;
    padding: 0;
}
html,
body {
    position: relative;
    margin: 0;
    padding: 0;
}
p,
h1,
h2,
h3,
h3,
h4,
h5,
h6 { margin-top: 20px }
body {
    background-color: #eee;
    color: #222;
    font-size: 12px;
    font-family: sans-serif;
    line-height: 1.5em;
}
#wrapper {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}
#pagetitle {
    margin-bottom: 20px;
    padding-bottom: 40px;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.5em;
}
/* end basic styles */
.tab-triggers {

}
.tab-triggers a {

}
.tab-triggers a.active {

}
.tabs-content {
    position: relative;
    padding-bottom: 20px;
    width: 100%;
    --webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.tabs-content .tab { position: relative }
.tabs-content .tab.active { position: relative }
.tabs-content {
    margin: 0;
    display: block;
}
.tab { display: none }
.tab.active { display: block }
/* Clearfixing tabs for beautif stacking */
.tabs:before,
.tabs:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.tabs:after { clear: both }
.tabs { zoom: 1 }
/*Custom Style*/
.tab-triggers {
    overflow: hidden;
    margin-top: 20px;
}
.tab-triggers a {
    display: inline-block;
    width: 25%;
    line-height: 40px;
    text-decoration: none;
    color: #05AFFF;
    background: #222;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0!important;
    text-align: center;
    float: left;
}
.tab-triggers a.active {
    color: #fff;
    background: #101010;
}
.tabs-content {
    margin: 0;
    display: block;
    color: white;
    background: #101010;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 10px 20px 10px;
}

JavaScript

var tabs = {

    trig   : $('nav.tab-triggers'),
    content: $('section.tabs-content'),

    // Kick off
    init   : function() {
        $.each(tabs.content,function(index, value) {
            $(value).children(':first').addClass('active').show().children().css('opacity', '1');
            $(value).children().not(':first').children().css('opacity', '0').end().hide();
        });

        tabs.addHeights([tabs.content]);
        tabs.address([tabs.trig]);
        tabs.address([tabs.content]);
        tabs.trig.on('click', 'a', tabs.display);

    },

    addHeights : function(obj) {
            $.each(obj, function(index, value) {
                var tabtoadjust = $(value).children();
                $.each(tabtoadjust, function(index, value) {
                    var tabheight = $(value).outerHeight(true);
                        if ( $(value).hasClass('active') ) {
                            $(value).parent().css('height', tabheight + 40);
                        }
                });
            });
        },

    // assign incremental classes hrefs and id's to containers (grouped by class), triggers, and panels
    address: function(obj) {
        // for each obj
        $.each(obj, function(index,value) {
             //for each instance of the trigger / content item in the obj
             $.each(obj[index], function(index2,value2) {
                //add an incrementing class for each matched element
                $(value2).addClass('tabs-' + index2);
                // get the children of each matched element
                var kids = $(value2).children();
                // loop through each of the children
                $.each(kids, function(index3, value3) {
                    var kid = $(value3);
                    // if its parent is a nav element
                    if ( kid.parent().is('nav') ) {
                    // add href
                        kid.attr('href', '#tab-' + index3);
                    } else {
                   ...