JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<div data-role="page" id="training-1">
    
        <div data-role="header" data-position="fixed" data-theme="b">
            <h1>Header</h1>
        </div>
        
        <div data-role="content">
           <ul data-role="listview">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
                <li><a href="index.html">GMC</a></li>
                <li><a href="index.html">Honda</a></li>
                <li><a href="index.html">Hyundai</a></li>
                <li><a href="index.html">Infiniti</a></li>
                <li><a href="index.html">Jeep</a></li>
                <li><a href="index.html">Kia</a></li>
                <li><a href="index.html">Lexus</a></li>
                <li><a href="index.html">Mini</a></li>
                <li><a href="index.html">Nissan</a></li>
                <li><a href="index.html">Porsche</a></li>
                <li><a href="index.html">Subaru</a></li>
                <li><a href="index.html">Toyota</a></li>
                <li><a href="index.html">Volkswagon</a></li>
                <li><a href="index.html">Volvo</a></li>
            </ul>
        </div>
        

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" data-icon="grid">Summary</a></li>
                    <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                    <li><a href="#"...

CSS

/* CSS */
</style>
<!-- access to the HEAD element -->
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>
/* CSS */

JavaScript

$(document).bind("mobileinit", function() {
    // True fixed toolbars in iOS5 
    $.mobile.touchOverflowEnabled = false;
    // Disable toggling toolbars on tap
    $.mobile.fixedToolbars.setTouchToggleEnabled(false);
});

/*!
 * jQuery Mobile v1.0rc2
 * http://jquerymobile.com/
 *
 * Copyright 2010, jQuery Project
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
(function(a,d){if(a.cleanData){var b=a.cleanData;a.cleanData=function(c){for(var e=0,d;(d=c[e])!=null;e++)a(d).triggerHandler("remove");b(c)}}else{var c=a.fn.remove;a.fn.remove=function(b,e){return this.each(function(){e||(!b||a.filter(b,[this]).length)&&a("*",this).add([this]).each(function(){a(this).triggerHandler("remove")});return c.call(a(this),b,e)})}}a.widget=function(c,b,d){var h=c.split(".")[0],i,c=c.split(".")[1];i=h+"-"+c;if(!d)d=b,b=a.Widget;a.expr[":"][i]=function(b){return!!a.data(b,
c)};a[h]=a[h]||{};a[h][c]=function(a,c){arguments.length&&this._createWidget(a,c)};b=new b;b.options=a.extend(true,{},b.options);a[h][c].prototype=a.extend(true,b,{namespace:h,widgetName:c,widgetEventPrefix:a[h][c].prototype.widgetEventPrefix||c,widgetBaseClass:i},d);a.widget.bridge(c,a[h][c])};a.widget.bridge=function(c,b){a.fn[c]=function(g){var h=typeof g==="string",i=Array.prototype.slice.call(arguments,1),k=this,g=!h&&i.length?a.extend.apply(null,[true,g].concat(i)):g;if(h&&g.charAt(0)==="_")return k;
h?this.each(function(){var b=a.data(this,c);if(!b)throw"cannot call methods on "+c+" prior to initialization; attempted to call method '"+g+"'";if(!a.isFunction(b[g]))throw"no such method '"+g+"' for "+c+" widget instance";var e=b[g].apply(b,i);if(e!==b&&e!==d)return k=e,false}):this.each(function(){var d=a.data(this,c);d?d.option(g||{})._init():a.data(this,c,new b(g,this))});return...