JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<div class="mainelement">
    <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
    <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
    <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>
</div>

CSS

/**  * PWS Tabs jQuery Plugin  * Author: Alex Chizhov  * Author Website: http://alexchizhov.com/pwstabs  * GitHub: https://github.com/alexchizhovcom/pwstabs  * Version: 1.2.0  * Version from: 21.01.2015  * Licensed under the MIT license  */
 @media only screen and (max-width:60em) {
    .pws_tabs_container.pws_tabs_responsive {
        width:100%!important
    }
    .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll {
        width:100%
    }
    .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li {
        vertical-align:top;
        text-align:center
    }
    .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a {
        margin:0;
        font-size:1em;
        line-height:1.125em;
        overflow:hidden
    }
    .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a i {
        display:block;
        margin:0 0 .3125em
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical {
        display:block;
        position:relative
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical:after {
        display:block;
        content:'';
        clear:both
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll {
        position:relative;
        float:none;
        width:100%
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li {
        display:inline-block
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical .pws_tabs_list {
        position:relative;
        float:none
    }
    .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li a {
        margin:0
    }
}
@media only screen and (max-width:37.5em) {
    .pws_tabs_container.pws_tabs_responsive {
        width:100%!important;
        position:relative
    }
    .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu {
        width:100%;
        height:40px;
        background-color:#9bd7d5;
        display:block
   ...

JavaScript

/**
 * PWS Tabs jQuery Plugin
 * Author: Alex Chizhov
 * Author Website: http://alexchizhov.com/pwstabs
 * GitHub: https://github.com/alexchizhovcom/pwstabs
 * Version: 1.2.1
 * Version from: 23.01.2015
 * Licensed under the MIT license
 */;
(function ($, window, document, undefined) {

    var pluginName = "pwstabs",
        defaults = {
            effect: 'scale', // You can change effects of your tabs container: scale / slideleft / slideright / slidetop / slidedown / none
            defaultTab: 1, // The tab we want to be opened by default
            containerWidth: '100%', // Set custom container width if not set then 100% is used
            tabsPosition: 'horizontal', // Tabs position: horizontal / vertical
            horizontalPosition: 'top', // Tabs horizontal position: top / bottom
            verticalPosition: 'left', // Tabs vertical position: left / right
            responsive: false, // BETA: Make tabs container responsive: true / false - boolean
            theme: '', // Theme name, you can add your own and define it here. This way you dont have to change default CSS. theme: 'name' - string
            rtl: false // Right to left support: true/ false
        };

    function Plugin(element, options) {
        
        this.element = $(element);
        this.$elem = $(this.element);
        this._name = pluginName;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        
        return this.init();
    };

    Plugin.prototype = {

        options: function (option, val) {
            this.settings[option] = val;
        },

        // Constructing Tabs Plugin
        init: function () {
            var pwsTabs = this.$elem.children('[data-pws-tab]');

            // Add class to our selector
            this.$elem.addClass('pws_tabs_list');

            // Place selector into container @1.2.0
            this.$elem.wrap('<div class="pws_tabs_container"></div>');


            /**
             *...