JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://dl.dropbox.com/s/hxh6teytrjoo222/toggle-icon.png"></script>
<script src="https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png"></script>
<div data-role="page" id="home">


<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-dismissible="true" data-theme="a" >    <!-- panel content goes here -->
    <!--label class="testSuiteId">Test Suite</label-->




</div>
<!-- /panel -->
<div data-role="header" data-theme="b">
    <img href="#mypanel" border="0" src="https://dl.dropboxusercontent.com/s/hxh6teytrjoo222/toggle-icon.png" style="float:left;display:inline;margin-top:2%" id="panelOpenImge" />

    <h1 style="position: relative;left: 40%">Test</h1>
    <!--a href="#mypanel" data-icon="" class="ui-btn-right gear"></a-->


</div>
    </div>

CSS

#mypanel{
    
    height:100px !important
}
@media ( min-width: 200px) {

	/* wrap on wide viewports once open */

	.ui-panel-page-content-open.ui-panel-page-content-position-left {
		margin-right: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-position-right {
		margin-left: 17em;
	}
	.ui-panel-page-content-open {
		width: auto;
	}

	.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
		margin-right: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
		margin-left: 17em;
	}
	.ui-panel-page-content-open.ui-panel-page-content-display-push {
		width: auto;
	}

}

JavaScript

$(function () {   
$('#panelOpenImge').click(function(){

        $( "#mypanel" ).panel( "open"  );

    })
    })