JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
<div data-role="page" class="ui-responsive-panel">
    <div data-role="panel" id="left_panel" data-position="left" data-display="overlay" data-theme="a" data-swipe-close="false">	<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>

    </div>
    <!-- /panel -->
    <div data-role="content">
        <div>	<a href="#" id="open_panel_btn" data-role="button" data-icon="arrow-r" data-iconpos="right">Open</a>

        </div>
    </div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" id="footer">
        <div class="slider-container">
            <input type="range" name="slider" id="slider" min="0" value="0" max="100" />
        </div>
    </div>
    <!-- /footer -->
</div>

JavaScript

$("#open_panel_btn").on("click", function (e) {
    $("#left_panel").panel("open");
});