JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page">
    <div data-role="header">
        	<h1>Page Title</h1> 
    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true"></ul>
        <!-- /listview -->
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4> 
    </div>
    <!-- /footer -->
</div>
<!-- /page -->

JavaScript

$(document).on("pagecreate", function (e, ui) {
    var list = '';
    for (i = 1; i <= 5; i++) {
        list += '<li class="listbtn"> <a href="#">item ' + i + '</a></li>';
    }
    $("ul").append(list).listview("refresh");
});
$(document).on("click", ".listbtn", function () {
    $("a", this).toggleClass("ui-btn-active");
});