JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search-dialog" data-role="dialog" data-theme="a" data-url="search-menu">
    <div data-role="header" class="header"><h1>Recipe Search</h1></div>
    <div data-role="content">blah blah blah</div>
</div>

<div class="pull-demo-page" data-role="page">
    text text text text text text text text text text text text text text text text text 
    <a href="#" id="search-menu-button" data-role="button" data-icon="search" data-iconpos="notext" data-transition="pop" data-theme="c" data-inline="true">search</a>
</div>

JavaScript

$('button').on('click', function () {
    $.mobile.changePage("#popup", {
        role: "dialog"
    });
});

$('#search-menu-button').on('click', function(){
     $('#search-dialog').trigger('create');
     $.mobile.changePage($("#search-dialog"), { role: "dialog" });
});