JSFiddle - React, Tailwind, and code Playground

by alivedise

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default.css">
<BODY>

<DIV class="ui-layout-north">
    <DIV class="buttons">
        <BUTTON onClick="removeUITheme(); myLayout.resizeAll();">Remove UI Theme</BUTTON>
        <BUTTON onClick="myLayout.resizeAll()">Resize Layout</BUTTON>
    </DIV>

    <B>Three sets of 'sortable tabs' are shown on this page...</B>
    <P>
        The tabs in the west and center panes both use Layout's 'pane header/footer' capabilities so only the 'tab-content' scrolls.
        This is done by putting a wrapper-div around the pane-divs, with the "ui-layout-content" class.
    </P>
    <P><B>West-pane tabs</B> 'fill the pane', so most 'tab borders' are removed because the pane already has borders</P>
    <P><B>Center-pane tabs</B> 'float' inside the pane's padding, so the tabs have their own border</P>
    <P>
        <B>East-pane tabs</B> <u>do not</u> utilize Layout's auto-sizing,
        so the tabs do not stay in place when the pane scrolls.
    </P>
</DIV>


<DIV class="ui-layout-center">
    <UL>
        <LI><A href="#tabs-center-1">Nunc tincidunt</A></LI>
        <LI><A href="#tabs-center-2">Proin dolor</A></LI>
    </UL>
    <!-- add wrapper that Layout will auto-size to 'fill space' -->
    <DIV class="ui-layout-content ui-widget-content ui-corner-bottom">
        <DIV id="tabs-center-1">
            <P>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem...

CSS

/*
         *    GLOBAL LAYOUT STYLES
         */
        .ui-layout-content {
            overflow:        auto; /* add scrolling to content-divs (panel-wrappers) */
            border-top:        0 !important; /* tab-buttons above this DIV already has a border-bottom */
        }

        /*
         *    TAB-THEME ADJUSTMENTS
         */
        .ui-tabs-nav li {
            white-space:    nowrap;
        }
        .ui-tabs-nav li a {
            font-size:        1em !important;
            padding:        4px 1.5ex 3px !important;
        }
        .ui-tabs-panel {
            font-size:        1em !important;
            padding:        0 1em !important;
        }

        /*
         *    WEST-PANE TABS
         *
         *    These tabs 'fill' the pane,
         *    so the pane-border acts as the tab-border
         */
        .ui-layout-pane-west {
            padding:    0;
            overflow:    hidden;
            }
            .ui-layout-pane-west .ui-tabs-nav {
                /* don't need border or rounded corners - tabs 'fill' the pane */
                border-top:        0;
                border-left:    0;
                border-right:    0;
                padding-bottom:    0 !important;
                -moz-border-radius:        0;
                -webkit-border-radius:    0;
            }

        /*
         *    CENTER-PANE TABS
         *
         *    These tabs have white-space around them,
         *    so the content-div provides the border for the tabs
         */
        .ui-layout-pane-center {
            background:    #FFD; /* to make pane background stand-out */
            padding:    10px;
            overflow:    hidden;
            }
            .ui-layout-pane-center .ui-tabs-nav {
                /* remove rounded corners from bottom of 'tabs'*/
                -moz-border-radius-bottomleft:        0;
                -moz-border-radius-bottomright:        0;
                -webkit-border-bottom-left-radius:   ...

JavaScript

$(document).ready( function() {

            // TABS-WEST - sortable
            $(".ui-layout-west")
                .tabs()
                .find(".ui-tabs-nav")
                    .sortable({ axis: 'x', zIndex: 2 })
            ;

            // TABS-EAST - sortable
            $(".ui-layout-east")
                .tabs()
                .find(".ui-tabs-nav")
                    .sortable({ axis: 'x', zIndex: 2 })
            ;

            // TABS-CENTER - sortable
            $(".ui-layout-center")
                .tabs({
                    change: function () {  }
                })
                .find(".ui-tabs-nav")
                    .sortable({ axis: 'x', zIndex: 2 })
            ;

            // PAGE LAYOUT
            myLayout = $('body').layout({
                west__size:            .33
            ,    east__size:            .33
            ,    south__initClosed:    true
            });


            addThemeSwitcher( 'body > .ui-layout-north', { top: '13px', right: '20px' });
            // if a theme is applied by ThemeSwitch *onLoad*, it may change the height of some content,
            // so we need to call resizeLayout to 'correct' any header/footer heights affected
            // call multiple times so fast browsers update quickly, and slower ones eventually!
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* (eg: themeSwitcher)
            //setTimeout( resizeOuterLayout, 1000 ); /* allow time for browser to re-render for theme */
            //setTimeout( resizeOuterLayout, 5000 ); /* for really slow browsers */
        });