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>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div data-role="page" id="index" data-theme="a">
    <div data-role="header" data-tap-toggle="false" data-position="fixed">
         <h1>Index</h1>

    </div>
    <div role="main" class="ui-content"><a href="http://www.google.com" rel="external" class="ui-btn external">Google?</a>

    </div>
</div>

JavaScript

$(document).on("pagecreate", "#index", function () {
    $(".external").on("click", function (e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $.mobile.loading("show", {
            text: "redirecting...",
            textVisible: true
        });
        setTimeout(function () {
            location.href = url;
        }, 2000);
    });
});