JSFiddle - React, Tailwind, and code Playground

by Kyle Sebrasky

HTML

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<body>
    <!-- ****************************************************************************** -->
    <!-- Start of MPOS page -->
    <!-- ****************************************************************************** -->
    <div data-role="page" id="mpos">

        <!-- ****************************************************************************** -->
        <!-- This is the main body of the mpos page -->
        <!-- ****************************************************************************** -->
        <div data-role="main" class="ui-content">
            <!-- ui-content adds padding around the page to prevent controls being too close to the edge -->
            <div>
                <a href="#" class="ui-btn ui-btn-inline ui-corner-all ui-shadow" style="font-size:.8em">
                    <svg viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0h24v24H0z" fill="none" />
                        <path fill="black" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
                    </svg>
                    <br>Checkout
                </a>

                <a href="#productlookup" class="ui-btn ui-btn-inline ui-corner-all ui-shadow" style="font-size:.8em">
                    <svg viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0h24v24H0z" fill="none" />
                        <path fill="black" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                        />
                    </svg>
         ...

CSS

.controlgroup-textinput {
    padding-top: .22em;
    padding-bottom: .22em;
    width: 40vw;
}

JavaScript

$(document).on('pagebeforecreate', '[data-role="page"]', function(event) {

    $(function() {
        $("body>[data-role='panel']").panel();
    });

    console && console.log($(this).attr('id') + " - pagebeforecreate!!");
});

$(document).on('pageshow', '[data-role="page"]', function(event) {

    switch ($(this).attr('id')) {
        case "mpos":
            break;
        case "productlookup":
            $("input:text:visible:first").focus();
            break;
        default:
            console && console.log("default show!!");
    };

    console && console.log($(this).attr('id') + " - pageshow!!");
});