JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.2/normalize.css">


        <h1>jQuery Herotabs Examples</h1>
        <p>Check <a href="http://github.com/simonsmith/jquery.herotabs">the GitHub page</a> for documentation</p>

        <hr>

        <h2>Example 1</h2>
        <p>Uses a delay and fade effect. Will pause tab cycling whilst hovered or focused.</p>
        <div class="tabs tabs-horiz">
            <ul class="tab-nav js-nav">
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab1">First tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab2">Second tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab3">Third tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab4">Fourth tab</a></li>
            </ul>
            <div class="tab-pane js-tab" id="ex1-tab1">
                <img src="http://lorempixel.com/600/250/sports/2" alt="">
                <div class="tab-info">
                    <p>Some info about this item. <a href="#">A link to focus</a></p>
                </div>
            </div>
            <div class="tab-pane js-tab" id="ex1-tab2">
                <img src="http://lorempixel.com/600/250/fashion/2" alt="">
            </div>
            <div class="tab-pane js-tab" id="ex1-tab3">
                <img src="http://lorempixel.com/600/250/transport/1" alt="">
                <div class="tab-info">
                    <p>Some info about this item <a href="#">A link to focus</a></p>
                </div>
            </div>
            <div class="tab-pane js-tab" id="ex1-tab4">
                <img src="http://lorempixel.com/600/250/nature/2" alt="">
            </div>
        </div>

        <hr>

        <h2>Example 2</h2>
        <p>Uses hover to switch tabs</p>

        <div class="tabs tabs-vert">
            <ul class="tab-nav js-nav">
                <li class="tab-nav-item js-nav-item"><a...

CSS

/*
    Default
    -----------------------------
*/
body {
    width: 600px;
    margin: 30px auto;
}

a:focus {
    outline: red 2px dotted;
}

ul {
    margin: 0;
    padding: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}



/*
    Common tab styles
    -----------------------------
*/
.tab-nav {
    margin: 0;
}

.tab-nav li {
    margin-bottom: 5px;
}

.tabs {
    width: 600px;
}

.tabs .tab-info {
    padding: 10px 10px;
    background-color: #333;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 5px;
    color: #fff;
}

.tabs .tab-info p {
    margin: 0;
}

.tabs .tab-info a {
    color: inherit;
}

.tabs .tab-pane {
    position: relative;
}

.tabs.is-active .tab-pane {
    position: absolute;
}



/*
    Tabs horizontal
    -----------------------------
*/
.tabs-horiz .tab-info {
    position: absolute;
    top: 15px;
    right: 15px;
}

.tabs-horiz.is-active {
    position: relative;
    height: 250px;
}

.tabs-horiz.is-active .tab-nav {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 5;
}

.tabs-horiz.is-active .tab-nav-item {
    display: inline-block;
    margin-right: 3px;
}

.tabs-horiz.is-active .tab-nav-item a {
    background-color: #fff;
    border: 1px solid #444;
    border-radius: 50%;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
    display: block;
}

.tabs-horiz.is-active .tab-nav-current a {
    background-color: #ff6d3a;
}



/*
    Tabs vertical
    -----------------------------
*/
.tabs-vert .tab-info {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.tabs-vert.is-active {
    position: relative;
    height: 250px;
}

.tabs-vert.is-active .tab-nav {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.tabs-vert.is-active .tab-nav-item {
    list-style-type: none;
    margin-bottom: 8px;
}

.tabs-vert.is-active .tab-nav-item a {
    padding: 10px 10px;
   ...

JavaScript

/** @preserve
 * jquery.herotabs
 * version 1.1.0;
 * https://github.com/simonsmith/jquery.herotabs
 * @blinkdesign
 */

!function(global) {
    'use strict';

    var instanceId = 0;
    var defaults = {
        delay: 0,
        duration: 0,
        startOn: 0,
        reverse: false,
        interactEvent: 'click',
        useHash: true,
        useTouch: true,
        css: {
            active:     'is-active',
            current:    'tab-current',
            navCurrent: 'tab-nav-current',
            navId:      'tabnav'
        },
        selectors: {
            tab:       '.js-tab',
            nav:       '.js-nav',
            navItem:   '.js-nav-item'
        },
        zIndex: {
            bottom: 1,
            middle: 2,
            top:    3
        }
    };

    // Wrap is used for AMD support
    var wrap = function($) {

        var Herotabs = function(container, options) {
            this.container         = container;
            this.options           = options;
            this._currentTab       = null;
            this._timer            = null;
            this._instanceId       = ++instanceId;

            this._getDOMElements();

            if (this.nav.length > 0) {
                this._ariafy();
                this._setCurrentNav();
                this._attachNavEvents();
            }

            this._setInitialTab(options.startOn);
            this._attachKeyEvents();

            // Don't allow tab cycling on a mobile device as user cannot
            // hover to pause it
            if (options.delay > 0 && !this._isTouchEnabled()) {
                this.start();
                this._attachHoverEvents();
            }

            container.addClass(options.css.active);
        };

        Herotabs.prototype = {
            constructor: Herotabs,

            showTab: function(tabToShow) {
                // Allow element or index to be passed
                tabToShow = (typeof tabToShow != 'number' ? tabToShow :...