JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<!doctype html>
<html manifest="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
$("[data-role=page]").live("pagecreate", function(event, ui) {
     //do stuff when Mypage1 is created 
     // happens once if you don't explicitly refresh
        // alert("Mypage1 created");
    
    var navbar = '<div data-role="navbar" data-iconpos="left"> <ul>   <li><a href="#Find" data-theme="c" data-icon="search"> Find</a></li> <li><a href="#Publish" data-theme="c" data-icon="grid"> Publish </a></li>  <li><a href="#Subscribe" data-theme="c" data-icon="alert"> Subscribe</a></li>  </ul> </div>';
    
     $("#" + event.target.id).find("[data-role=header]").append(navbar, function(){
           $("#" + event.target.id).find("[data-role=navbar]").navbar();
     });
     $("[href=#"+event.target.id+"]").addClass('ui-btn-active ui-state-persist');

});

</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
        
<body>
                        
<div data-role="page" id="Find">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>test</h3>
        
    </div>
    <div data-role="content">
        1
    </div>
</div>
<div data-role="page" id="Publish">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>test</h3>
    </div>
    <div data-role="content">
        2
    </div>
</div>
<div data-role="page" id="Subscribe">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h3>test</h3>
        
    </div>
    <div data-role="content">
        3
    </div>
</div>