JSFiddle - React, Tailwind, and code Playground

by Omar X

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>
<div data-role="page" class="page ui-responsive-panel">
    <!-- header -->
    <div data-role="header" data-theme="a">
         <h1 id="titlepage">ICU</h1>
 <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
 <a href="#right-panel" data-icon="gear" data-iconpos="notext">Add</a>

    </div>
    <!-- /header -->
    <!-- content that is replaced by ajax -->
    <div id="content" data-role="content">
         <h2>content</h2>

    </div>
    <!-- /content -->
    <!-- Left menu panel -->
    <div data-role="panel" data-position="left" data-position-fixed="false" data-display="overlay" id="nav-panel" data-theme="b">
        <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search" id="nav">
            <li data-icon="delete" style="background-color:#111;" data-theme="b">
                <!--Removed data-rel="close" since there is a bug in jquery mobile https://github.com/jquery/jquery-mobile/issues/1405 --> <a href="#closemenu">Close menu</a>

            </li>
            <li data-filtertext="Inbox"> <a href="#" id="inbox">
                        <span class="ui-mail-icon-blue nav-ui-thumbnail"></span>
                        <span class="ui-li-count ui-btn-up-a ui-btn-corner-all" id="mail#">2</span>
                        <h1 class="ui-li-headline">Inbox</h1>
                        <p class="ui-li-desc" id="gotMail">Du har mail!</p>
                    </a>

            </li>
            <li data-filtertext="Startsida"> <a href="html/dummy2.html">
                        <span class="ui-start-icon nav-ui-thumbnail"></span>
                        <h1 class="ui-li-headline">Startsida</h1>

                    </a>

            </li>
            <li data-filtertext="Översikt"> <a href="html/dummy2.html">
             ...

JavaScript

$(document).on("pagecreate", function () {
     $("#inbox").on("click", function () {
         var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
         $.mobile.loading("show", {
             text: "loading...",
             textVisible: true
         });
         $.get("http://jsfiddle.net/Palestinian/Q4Z23/show", function (data) {
             $("#content", activePage).html(data).enhanceWithin();

         }, "html").success(function () {
             $.mobile.loading("hide");
             $(".ui-panel-open").panel("close");
         });
     });
 });