JSFiddle - React, Tailwind, and code Playground

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="header" data-theme="a">
    <a href="#menuPanel" data-rel="panel" class="ui-btn">Left</a>
    <h1>Header</h1>
    <a href="#productPanel" data-rel="panel" class="ui-btn">Right</a>
  </div>
  <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"
     ...

CSS

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

JavaScript

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

$(document).on('pagecontainershow', function(event, data) {
  var page = data.toPage;
  switch (page.prop('id')) {
    case "mpos":
      break;
    case "productlookup":
      $("input", page).focus();
      break;
    default:
      console && console.log("default show!!");
  };
  console && console.log(page.prop('id') + " - pageshow!!");
});