JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="p1">
    <div data-role="header">
         <h1>Page 1</h1>

    </div>
    <div role="main" class="ui-content">
        <p>Welcome Guest!</p>

    </div>
</div>
<div data-role="page" id="p2" data-dialog="true">
    <div data-role="header">
         <h1>Login</h1>

    </div>
    <div role="main" class="ui-content">
        <p>Error: Please login.</p>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <a href="#p1" class="ui-btn ui-btn-a ui-btn-icon-top ui-icon-home" data-transition="slideup">Login as a Guest</a>
    </div>
</div>

JavaScript

var logged = false;
$(document).on("pagebeforechange", function (e, data) {
    if (!logged && data.toPage[0].id == "p1" && typeof data.options.fromPage == "undefined") {
        $.mobile.pageContainer.pagecontainer("change", "#p2", {
            transition: "flip"
        });
        e.preventDefault();
    }
});