JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn panel">MENU</a>

         <h1>Index</h1>

    </div>
    <div role="main" class="ui-content">
        <div class="ui-body ui-body-a ui-corner-all">
            	<h1>Index Page</h1>

        </div>
    </div>
</div>
<div data-role="page" id="about">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn panel">MENU</a>

         <h1>About</h1>

    </div>
    <div role="main" class="ui-content">
        <div class="ui-body ui-body-a ui-corner-all">
            	<h1>About Page</h1>

        </div>
    </div>
</div>
<div data-role="page" id="services">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn panel">MENU</a>

         <h1>Services</h1>

    </div>
    <div role="main" class="ui-content">
        <div class="ui-body ui-body-a ui-corner-all">
            	<h1>Services Page</h1>

        </div>
    </div>
</div>
<!-- External Panel -->
<div id="bg"></div>
<div id="content">
    <div data-role="controlgroup" data-mini="true">
        <ul data-role="listview" data-theme="a" data-inset="true" id="menu">
            <li><a href="#index">Index</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#services">Services</a>

            </li>
        </ul> <a href="#" class="ui-btn ui-btn-b ui-btn-icon-right ui-icon-delete panel-close-btn">Close</a>

    </div>
</div>
<!-- / -->

CSS

.panel-animate {
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    transition: all 350ms ease;
}
.panel-open {
    -webkit-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1);
    -moz-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1);
    -ms-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1);
    -o-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1);
    transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1);
}
.panel-close {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
#bg {
    height: 100%;
    width: 100%;
    background-image: url(http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/05/stylish-floral-pattern.png);
    background-repeat: no-repeat;
    background-size:cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
}
#content {
    height: 100%;
    width: 30%;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: -9999;
}
.activePage {
    background-color: red !important;
    border-color: red !important;
    color: #fff !important;
    text-shadow: 0 1px 0 #059 !important;
    font-style: italic;
}

JavaScript

$(document).one("pagecreate", function () {

    /* create reside-menu */
    $("#content").enhanceWithin().hide();

    /* open function */
    function openMenu() {
        var activePage = $("body").pagecontainer("getActivePage");
        $("body").css({
            "overflow-y": "hidden"
        });
        var padding = $(".ui-header", activePage).outerHeight() + $(".ui-footer.ui-footer-fixed", activePage).outerHeight();
        activePage.height($(window).height() - padding);
        activePage.addClass("panel-animate panel-open");
        $("#content").show();
    }

    /* close function */
    function closeMenu() {
        var activePage = $("body").pagecontainer("getActivePage");
        $(".ui-page-active").addClass("panel-close").removeClass("panel-open");
        $("#content").css("z-index", "-9999");
    }

    /* change page */
    $("#content").on("click", "a:not(.panel-close-btn)", function (e) {
        $(".activePage").removeClass("activePage");
        e.preventDefault();
        var page = $(this).attr("href");
        $(this).addClass("activePage");
        closeMenu();
        $(document).one("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ".panel-close", function (e) {
            $("body").pagecontainer("change", page, {
                transition: "flip"
            });
        });
    });

    /* open */
    $(".panel").on("click", openMenu);

    /* close */
    $(".panel-close-btn").on("click", closeMenu);

    /* remove animation and extra styles */
    $(document).on("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ".panel-open, .panel-close", function (e) {
        var activePage = $("body").pagecontainer("getActivePage");
        if ($(this).hasClass("panel-open")) {
            $("#content").css("z-index", "9999");
        }
        if ($(this).hasClass("panel-close")) {
            $("#content").hide();
            $("body").removeAttr("style");
           ...