JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<div data-role="page">
    <div data-role="header"> <a href="#menuA" data-rel="panel" class="ui-btn">Theme</a>

         <h1>Header</h1>

<a href="#menuB" data-rel="panel" class="ui-btn ui-btn-b">No theme</a>

    </div>
    <div data-role="content">
        <p>Dont forget to add <i>theme</i>  <code>data-theme=""</code> to <i>External</i> panel(s).</p>
    </div>
</div>

<div data-role="panel" id="menuA" data-display="push" data-position="left" data-theme="a">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">List view</li>
            <li data-icon="home">item</li>
            <li data-icon="home">item</li>
            <li data-icon="home">item</li>
        </ul>
        <div data-role="collapsible">
             <h3>Collapsible</h3>

            <p>I'm a collapsible</p>
        </div>
        <input type="text" placeholder="Text" /><a href="#" class="ui-btn">Anchor</a>

    </div>
</div>
<div data-role="panel" id="menuB" data-display="push" data-position="right">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">List view</li>
            <li data-icon="home">item</li>
            <li data-icon="home">item</li>
            <li data-icon="home">item</li>
        </ul>
        <div data-role="collapsible">
             <h3>Collapsible</h3>

            <p>I'm a collapsible</p>
        </div>
        <input type="text" placeholder="Text" /><a href="#" class="ui-btn">Anchor</a>

    </div>
</div>

CSS

/* neglect this */
code {
    background-color: #eeeeee;
    color: #ff0000;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    padding: 2px 5px;
    font-size: 16px;
    text-shadow: none;
}

JavaScript

$(function () {
    $("[data-role=panel]").panel().enhanceWithin();
});