JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="p1" data-theme="a">
  <div data-role="header" data-position="fixed">
    <h1>Flex Box</h1>

  </div>
  <div role="main" class="ui-content"> <a href="#" class="ui-btn foo">(b) theme</a>
    <a href="#" class="ui-btn bar">(a) theme</a>

  </div>
</div>

JavaScript

;
(function($, undefined) {
  $.widget("mobile.page", $.mobile.page, {
    _setOptions: function(o) {
      if (o.theme !== undefined) {
        this.element
          .removeClass(function(i, c) {
            return (c.match(/\bui-page-theme-\w/g) || []).join(' ');
          })
          .addClass("ui-page-theme-" + o.theme);
      }
    }
  });
})(jQuery);

/**/

$(document).on("pagecreate", function() {
  $(".foo").on("click", function() {
    $.mobile.pageContainer.pagecontainer("getActivePage").page("option", "theme", "b");
  });
  $(".bar").on("click", function() {
    $.mobile.pageContainer.pagecontainer("getActivePage").page("option", "theme", "a");
  });
});