JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<div data-role="page" id="pg-home">
    
    <div data-role="header">
        <div class="ui-btn-left">
            <a href="#" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh Data</a><a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Toggle Live Data</a>        </div>
        <h1>Home</h1>
        <div class="ui-btn-right">
            
            <a href="#" class="btn-logout" data-role="button" data-icon="lock" data-iconpos="notext">Logout</a>
        </div>
    </div><!-- /header -->
    
    <div data-role="content">    
        <ul data-role="listview" data-inset="true" data-dividertheme="f"> 
            <li><a href="#pg-system_overview">System Overview</a></li>
            <li><a href="#pg-control">Control</a></li>
            <li><a href="#pg-alarms">Alarms</a></li>
            <li><a href="#pg-temperatures">Temperatures</a></li>
            <li><a href="#pg-moistures">Moistures</a></li>
            <li><a href="#pg-settings">Web Settings</a></li>
        </ul>
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4 class="status-message"></h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="pg-system_overview">

<div data-role="header">
    <div class="ui-btn-left">
        <a href="#pg-home" data-role="button" data-icon="home" data-iconpos="notext">Home</a><a href="#" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh Data</a><a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Toggle Live Data</a>        </div>
    
    <h1>System Overview</h1>
    <div class="ui-btn-right">
        <a href="#" class="btn-logout" data-role="button" data-icon="lock" data-iconpos="notext">Logout</a>
    </div>
</div><!-- /header -->

<div data-role="content">    
    <p>I'm first in the source order so I'm shown as the page.</p>        
    <p><a...

JavaScript

$(document).bind("mobileinit", function(){
    $.mobile.hidePageLoadingMsg();    
});
$(".btn-logout").bind("click", SubmitLogout);


function getActivePageId() {
    return window.location.hash.length > 0 ? window.location.hash : "#pg-home";
}

function StatusUpdate(m, c) {
    c = typeof c == "function" ? c : function() {};
    getActivePageId();
    var obj = $(getActivePageId() + " .status-message");
    obj.stop().fadeTo(0, 0).html(m).fadeTo(300, 100).delay(2000).fadeTo(300, 0, c);
}

function SubmitLogout() {
    StatusUpdate("Processing request...", function() {
        alert("Callback Triggered!");
    });
}