JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<article class="carousel">
    <nav>
        <ul><!-- you can put the links anywhere outside of this article; the carousel will work without a nav too -->
            <li><a href="#itemone" class="active">item one </a> </li>
            <li><a href="#another">another </a> </li>
            <li><a href="#yetanother">yetanother </a> </li>
            <li><a href="#lastthing">last thing</a> </li>
        </ul>
    </nav>
  <section id="itemone" class="active"><h1>item one</h1>  put whatever you want in these</section>
    <section id="another">another</section>
    <section id="yetanother">another <h3> more stuff injection</h3></section>
    <section id="lastthing" class="hidden"> last thing</section>
</article>

<a href="#lastthing"  class="btn">last item</a>


<a href="#itemone" class="btn">first item</a>

CSS

$tone:  #a6a6a6;
 
*{font-family: Overpass; font-weight:200;}

p{ text-align:left; max-width: 35em;   color:darken( $tone, 34% ); line-height:1.5em; font-family:sans-serif;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
 margin: .5em auto; 
em
    {color:darken( $tone, 20% )}
}

body{
  font-family:overpass, sans-serif;
  font-size:13px;
  background-color:#ccc; 
  color:darken( $tone, 50% );
  padding:0em 5em;
  font-family: sans-serif;

 font-size: 1em; line-height: 1.5em; color: #666;  padding:3em 5em; max-width: 40em; margin:0 auto;}

/* bling */

*{-webkit-transition: all .15s ease; }

.tabbed > nav ul li a:focus, .tabbed > nav ul li a:hover { box-shadow: inset 0 -.5em  .665em rgba(0,0,0,0.031) }

.tabbed > nav a { border-radius: .666em .666em 0 0 }

.tabbed > nav a.active { box-shadow:inset 0 1em 1.51em rgba(255,255,255,0.333) !important }
.tabbed > section.active{border-radius: 0em 0em .666em .666em}

.tabbed > nav ~ section.active {border-radius: 0 .666em .666em .666em}
.tabbed > section.active {border-radius: .666em}
.tabbed > section.active:last-child {border-radius: .666em 0 .666em .666em}


button, input[type=button], input[type=submit], a.button, a.submit, a:visited.button, a:link.button, select { border-radius: .25em; box-shadow: inset 0 1em 1em rgba(255,255,255,0.111), inset 0 -1em 1em rgba(0,0,0,0.066), inset 0 0 0 1px rgba(0,0,0,0.111), inset 0 0 0 2px rgba(255,255,255,0.111), 0 .111em .111em rgba(0,0,0,0.0666); }


.dark button, .dark input[type=button], .dark input[type=submit],.dark  a.button, .dark a.submit, .dark a:visited.button, .dark a:link.button, .dark select { border-radius: .25em; box-shadow: inset 0 1em 1em rgba(255,255,255,0.111), inset 0 -1em 1em rgba(0,0,0,0.066), inset 0 0 0 1px rgba(0,0,0,0.811), inset 0 0 0 2px rgba(255,255,255,0.05111), 0 .111em .111em rgba(0,0,0,0.0666); }


a:focus, button:focus, input[type=button]:focus, input[type=submit]:focus, a.button:focus, select:focus, button:hover, input[type=button]:hover,...

JavaScript

function copyClass($section, cls) {
    var id = $section.attr('id');
    if (!id) {
        return;
    }
    var has_class = $section.hasClass(cls);
    $('a[href="#' + id + '"]').toggleClass(cls, has_class);
    $('.' + id).toggleClass(cls, has_class);
}

function ensureConsistency() {

    // We specify which classes are okay to clone 
    // (classes that will never be used as an ID)
    var classes = ['disabled', 'disabling', 'active', 'alert', 'online'];
    var copyAllClasses = function() {
        var $section = $(this);
        jQuery.each(classes, function(ix, cls) {
            copyClass($section, cls);
        });
    };

    // We set which elements to listen to the ID/Status of
    $('section').each(copyAllClasses);
    // how can we do this without specifying all elements?
    $('div').each(copyAllClasses);
    $('a').each(copyAllClasses);
    $('span').each(copyAllClasses);
    $('td').each(copyAllClasses);
    $('table').each(copyAllClasses); 
}

ensureConsistency(); // now we pull the trigger



function activateFirstSections($root) {
    var $sections = $root.children('section');
    if ($sections.length === 0) {
        return;
    }
    if ($sections.filter('.active').length > 0) {
        return;
    }
    var $first_section = $sections.first().addClass('active');
    activateFirstSections($first_section);
}

function activateElement($elem) {
    $elem.addClass('active');
    $elem.siblings().removeClass('active');
}

function activateTab(id) {
    var $current_section = $('#content');
    if (id) {
        var $elem = $('#' + id);
        activateElement($elem);
        activateElement($elem.parents('section'));

        if ($elem[0].tagName === 'SECTION' && $current_section.has($elem).length > 0) {
            $current_section = $elem;
        }
    }

    if ($current_section.find('section.active').length === 0) {
        activateFirstSections($current_section.children('article:first'));
    }

   ...