JSFiddle - React, Tailwind, and code Playground

by WebSerGe

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<div data-role="page" data-theme="a" id="mainpage">
			<div data-role="header" data-position="inline">
				<h1>Name</h1>
                <a href="#settings-page" class="ui-btn-right" data-role="button" data-icon="gear">Settings</a>
			</div>
			<div data-role="content">
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#date-requirements" class="ui-link-inherit">
                            Requirements
                        </a>
                    </li>
                </ul>
                <input type="button" value="Button" />
			</div>
		</div>

        <!--additional requirements -->
        <div data-role="page" data-theme="a" id="date-requirements"  data-add-back-btn="true">
            <div data-role="header" data-position="inline">
                <h1>Requirements</h1>
            </div>
            <a href="#mainpage" id="testbutton" data-role="button"  data-direction="reverse">OK</a>
        </div>
<div data-role="page" data-theme="a" id="settings-page"  data-add-back-btn="true">
        <div data-role="header" data-position="inline">
          <h1>Settings</h1>
        </div>
        <div data-role="content">
                    <div data-role="collapsible" id="skin-settings">
                        <h4>Skin</h4>
                        <ul data-role="listview">
                            <li><a href="#">Dark</a></li>
                            <li><a href="#">Blue</a></li>
                            <li><a href="#">Grey</a></li>
                            <li><a href="#">White</a></li>
                            <li><a href="#">Yellow</a></li>
                        </ul>
                    </div>
        </div>
    </div>

JavaScript

$(document).ready(function(){
    // configure transition effect
    $.mobile.changePage.defaults.allowSamePageTransition = true;
    $.mobile.changePage.defaults.transition="slide";
    // configure back button
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = "Back";
    // set skin
    $('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
        var currentTextSkin= $.trim($(this).text());
        var newTheme;
        switch (currentTextSkin)
        {
            case "Dark":
                newTheme="a";
                break;
            case "Blue":
                newTheme="b";
                break;
            case "Grey":
                newTheme="c";
                break;
            case "White":
                newTheme="d";
                break;
            case "Yellow":
                newTheme="e";
                break;
            default:
                newTheme="a";
        }
        var rmbtnClasses = '';
        var rmhfClasses = '';
        var rmbdClassess = '';
        var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"  ];
        $.each(arr,function(index, value){
            rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
            rmhfClasses = rmhfClasses + " ui-bar-"+value;
            rmbdClassess = rmbdClassess + " ui-body-"+value;
        });
        // reset all the buttons widgets
        $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
        // reset the header/footer widgets
        $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
        // reset the page widget
       ...