JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1">
  <div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
    <h3>Page one</h3>
  </div>
  <div class="ui-content">
    <p>content</p>
    <a href="#page2" class="ui-btn ui-page-link">Go to page2</a>
    <div data-role="collapsible">
      <h4>Heading</h4>
      <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
  </div>
  <div data-theme="b" data-role="footer" data-position="fixed" data-fullscreen="true">
    <h3>footer</h3>
  </div>
</div>

JavaScript

$(document).on("pagecreate", function() {
  $(".ui-header").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(e) {
    console.log("do something");
  });
});

$.widget("mobile.toolbar", $.mobile.toolbar, {
  toggle: function() {
    this[this._visible ? "hide" : "show"]();
    console.log(this._visible);
  }
});