JSFiddle - React, Tailwind, and code Playground

by B D

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<!DOCTYPE html>
<title>Page Title one</title>
<script id="panel-init">
    $(function() {
        $("body>[data-role='panel']").panel().enhanceWithin();
    });
</script>
<body>
    <div data-role="page">
        <div data-role="header">
             <h1>Page Title one</h1>

        </div>
        <!-- /header -->
        <div role="main" class="ui-content">
            <p>Page one content goes here.</p>
            <p><a href="two.html">Navigate to page 2</a>

            </p> <a href="#leftpanel3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Overlay</a>

        </div>
        <!-- /content -->
        <div data-role="footer">
             <h4>Page Footer</h4>

        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->
    <!-- external panel starts here -->
    <div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close</a>

            </li>
            <li data-icon="back"><a href="#demo-intro" data-rel="back">Demo intro</a>

            </li>
            <li data-role="list-divider">Categories</li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                 <h3>Bikes</h3> 
                <ul data-role="listview">
                    <li><a href="#">Road</a>

                    </li>
                    <li><a href="#">ATB</a>

                    </li>
                    <li><a href="#">Fixed Gear</a>

                    </li>
                    <li><a href="#">Cruiser</a>

                    </li>
                </ul>
            </li>
            <!-- /collapsible -->
        </ul>
   ...

CSS

/* Listview with collapsible list items. */
    .ui-listview > li .ui-collapsible-heading {
      margin: 0;
    }
    .ui-collapsible.ui-li-static {
      padding: 0;
      border: none !important;
    }
    .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn {
      border-top: none !important;
    }
    /* Nested list button colors */
    .ui-listview .ui-listview .ui-btn {
        background: #fff;
    }
    .ui-listview .ui-listview .ui-btn:hover {
        background: #f5f5f5;
    }
    .ui-listview .ui-listview .ui-btn:active {
        background: #f1f1f1;
    }
    /* Reveal panel shadow on top of the listview menu (only to be used if you don't use fixed toolbars) */
    #demo-page .ui-panel-display-reveal {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    #demo-page .ui-panel-page-content-position-left {
        -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
        -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
        box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    }