JSFiddle - React, Tailwind, and code Playground

by Stev Peifer

HTML

<br />
<div id="tab">
    <div id="tab1">
        tab1 contents
    </div>
    <div id="tab2">
        tab2 contents
    </div>
    <div id="tab3">
        tab3 contents
    </div>
</div>
<br />
<br />
<br />
<div id="2tab">
    <div id="tab1">
        <object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=runescape" bgcolor="#000000" style="float:left;margin:0;padding:0;">
            <param name="allowFullScreen" value="true" />
            <param name="allowScriptAccess" value="always" />
            <param name="allowNetworking" value="all" />
            <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
            <param name="flashvars" value="hostname=www.twitch.tv&channel=runescape&auto_play=false&start_volume=25" />
        </object>
    </div>
    <div id="tab2">
        <object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=tip_it" bgcolor="#000000" style="float:left;margin:0;padding:0;">
            <param name="allowFullScreen" value="true" />
            <param name="allowScriptAccess" value="always" />
            <param name="allowNetworking" value="all" />
            <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
            <param name="flashvars" value="hostname=www.twitch.tv&channel=tip_it&auto_play=false&start_volume=25" />
        </object>
    </div>
</div>

CSS

body{
    background-color:#253241;
}

JavaScript

(
    function($){
        $.fn.tab=function(option){

//~ -------------- NOTE -------------
//~ Create the memory object which
//~ will be used to build the tabs
//~ ---------------------------------

            var memory={
                read:{},
                write:{
                    tab:[],
                    tabContent:[]
                }
            },
            methods={
                switchTab:function(tabIndex){
                    if(variables.isBusy||tabIndex==variables.currentTab)
                        return false;
                    var currentHeight=$(memory.write.tabContent[variables.currentTab]).outerHeight(true),
                    newHeight=$(memory.write.tabContent[tabIndex]).outerHeight(true);
                    $(memory.write.tab[variables.currentTab]).css(
                        {
                            backgroundColor:'transparent',
                            borderTop:'none',
                            borderTopRightRadius:0,
                            height:28,
                            lineHeight:'28px',
                            marginTop:1
                        }
                    );
                    $(memory.write.tab[tabIndex]).css(
                        {
                            backgroundColor:'#36475a',
                            borderTop:'1px solid #11161d',
                            borderTopRightRadius:3,
                            height:29,
                            lineHeight:'29px',
                            marginTop:0
                        }
                    );
                    memory.write.tabCurrent.html((tabIndex+1)+' of '+memory.write.tab.length);
                    if(newHeight<currentHeight&&option.animation.animate){
                        variables.isBusy++;
                        memory.write.tabInner.animate(
                            {
                                height:newHeight
                           ...