JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<div id="root" class="flyout">
    <div class="flyout-pages">
        <div class="flyout-home">
            <ul>
                <li>
                    <a href="#">Page 1</a>
                </li>
                <li>
                    <a href="#">Page 2</a>
                </li>
            </ul>
        </div>
        <div class="flyout-page">
            Page 1 Content
            <div>
                <button class="flyout-page-close">Apply</button>
                <button class="flyout-page-close">Cancel</button>
            </div>
        </div>
        <div class="flyout-page">
            Page 2 Content
            <div>
                <button class="flyout-page-close">Apply</button>
                <button class="flyout-page-close">Cancel</button>
            </div>
        </div>
    </div>
    <div class="flyout-handle">
        <a href="#">&#0187;</a>
    </div>
</div>

<select>
    <option>This is an option.</option>
    <option>This is an option.</option>
    <option>This is an option.</option>
    <option>This is an option.</option>
</select>

CSS

.flyout {
    display: none;
    background-color: white;
}

.flyout-handle {
    float: left;
    width: 2em;
    border: solid 1px blue;
}

.flyout-pages {
    float: left;
    width: 20em;
    border: solid 1px black;
}

.flyout-home {
    border: solid 1px red;
}

.flyout-page {
    border: solid 1px green;
    background-color: white;
}

JavaScript

(function($) {
    function Flyout(element, options) {
        this.options = $.extend({}, $.fn.flyout.defaults, options);
        
        this.$element = $(element);
        this.element = element;
        
        this.init();
    };
    
    Flyout.prototype = {
        name: "flyout",
        homeIndex: -1,
        
        init: function() {
            var container = this.$element;
            var handleContainer = $(".flyout-handle", container);
            var handle = $("a", handleContainer);
            var pageContainer = $(".flyout-pages", container);
            var home = $(".flyout-home", pageContainer);
            var anchors = $("ul > li a", home);
            var pages = $(".flyout-page:not(.flyout-home)", pageContainer);
            
            // Build the data object and public API.
            var flyout = {
                container: this.$element,
                handleContainer: handleContainer,
                handle: handle,
                pageContainer: pageContainer,
                home: home,
                pages: pages,
                isOpen: false,
                pageIndex: -1
            };
            var api = {
                flyout: flyout,
                
                toggle: function() { toggle(flyout); },
                open: function() { open(flyout); },
                close: function() { close(flyout); },
                show: function(index) { show(flyout, index); },
                hide: function() { hide(flyout); }
            };
            
            this.flyout = flyout;
            
            // Move the container off screen and show it to allow measurement to take place
            // without the content being visible.
            container.css({ display: "block", position: "fixed", left: -9999 });
            
            // Position the home page and explicitly set its width.
            home.css({ position: "relative", left: 0, top: 0, width: home.width() });
            
            //...