JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<ul class="tabs" data-directive="tabs">
    <li><a href="#panel-01">Tab 1</a></li>
    <li><a href="#panel-02">Tab 2</a></li>
    <li><a href="#panel-03">Tab 3</a></li>
</ul>
<div id="panel-01">
    Tab content 1
</div>
<div id="panel-02">
    Tab content 2
</div>
<div id="panel-03">
    Tab content 3
</div>

CSS

body {
    font:normal 1.25em/1.5 Arial, sans-serif;
}
:focus {
    outline:1px dotted #EF9600;
    outline-offset:1px;
}

.tabs {
    margin:0;
    padding:0;
    border-bottom:1px solid #EEE;
}
.tabs > li {
    display:inline;
}
.tabs > li > a {
    display:inline-block;
    padding:.25em .5em;
    border:1px solid #EEE;
    border-bottom:0;
    text-decoration:none;
    background: #EEE;
}
.tabs > li > a.is-selected {
    margin-bottom:-1px;
    border-bottom:1px solid #FFF;
    background:#FFF;
}

JavaScript

(function (name, context, definition) {
    if (typeof define === 'function' && define.amd) {
        define(definition);
    }
    else if (typeof module !== 'undefined' && module.exports) {
        module.exports = definition();
    }
    else {
        context[name] = definition();
    }
})('Tabs', this, function() {

    /**
     * Tabs
     * @description Keyboard and screen reader accessible tabs.
     * @constructor
     * @param element
     */
    var Tabs = function(element) {
        this.target = element;
        this.tabs = element.getElementsByTagName('a');
        this.panels = [];

        for (var i = 0, len = this.tabs.length; i < len; i++) {
            this.panels.push( document.getElementById(this.tabs[i].hash.replace('#', '')) );
        }

        if (this.active === undefined) {
            this.init();
        }
    };

    /**
     * Init
     */
    Tabs.prototype.init = function() {
        var self = this;

        this.target.setAttribute('role', 'tablist');

        this.clickListener = function(e) {
            var target = e.srcElement || e.target;

            if (target  && target.nodeName.toLowerCase() === 'a') {

                if (e.preventDefault) {
                    e.preventDefault();
                }
                else {
                    e.returnValue = false;
                }

                self.toggle(target);
            }
        };

        this.keyupListener = function(e) {
            var tab;

            // Right
            if (e.keyCode === 39 && self.active.index < self.tabs.length) {
                tab = self.tabs[self.active.index + 1];
            }

            // Left
            else if (e.keyCode === 37 && self.active.index > 0) {
                tab = self.tabs[self.active.index - 1];
            }

            if (tab) {
                tab.focus();
                self.toggle(tab);
            }
        };

        for (var i = this.tabs.length - 1; i >= 0; i--) {
            var tab =...