JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<div data-role="page" class="ui-page-header-fixed">
    <div data-role="header" data-position="fixed"> <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> 
         <h1>Home</h1>

    </div>
    <div data-role="panel" id="menu-panel" data-display="push">
        <ul data-role="listview">
<li>
    
    <a href="#" class="sub1">
    Dashboard</a>

            </li>
             <li data-icon="false"><a target_id="pagefive" href="#pagefive" class="sub2">Link Accounts</a>

            </li>
        <li data-icon="false"><a target_id="pageten" href="#pageten"  class="sub3">Edit Dashboard</a>

        </li>
       <li data-icon="false"><a target_id="pageseven" href="#pageseven" class="sub4">About Adcore</a>

        </li>
        <li data-icon="false"><a target_id="pageeight" href="#pageeight" class="sub5">Contact us</a>

        </li>
                <li data-icon="false"><a href="#" onclick="exitFromApp();;" id="signout" class="sub6">Sign out</a>

        </li> 
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="main" class="ui-content">
        <div class='ui-sub-panel' id='submenu1'><div class='ui-header' data-theme='a'>
             <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a>

                 <h1 class='ui-title'>Dashboards</h1>
            </div>

            <div class="ui-content">
               <ul data-role="listview">
                   <li data-icon="false"><a target_id="pageeight" href="#pageeight" class="sub5">Client App</a>

        </li>
                   <li data-icon="false"><a target_id="pageeight" href="#pageeight" class="sub5">Agency App</a>

        </li>
                                      <li data-icon="false"><a target_id="pageeight" href="#pageeight" class="sub5">Campaign App</a>

  ...

CSS

.ui-panel {
		top: 41px;
		height: calc(100% - 41px);
	}
.ui-sub-panel {
    width: 17em;
    position: absolute;
    top: 0;
    left: -17em;
    min-height: 100%;
    max-height: none;
}
.ui-sub-panel-open {
    -moz-transform: translate3d(17em, 0, 0);
    -webkit-transform: translate3d(17em, 0, 0);
    transform: translate3d(17em, 0, 0);
}
.ui-sub-panel-animate {
    -webkit-transition: -webkit-transform 300ms ease;
    -moz-transition: -moz-transform 300ms ease;
    transition: transform 300ms ease;
}
.ui-sub-panel-close {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.ui-sub-content {
    width: 100%;
}

JavaScript

//$(document).unbind('panelbeforeopen');


/* open submenu1 */
$('.sub1').on('click', function () {
    $('#submenu1')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass("ui-sub-panel-close");
    $('.ui-sub-content')
        .addClass('ui-sub-panel-open ui-sub-panel-animate')
        .removeClass('ui-sub-panel-close');
});

/* close panel where close button is clicked */
$('.panel-close').on('click', function () {
    $(this)
        .closest(".ui-sub-panel")
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
    $('.ui-sub-content')
        .addClass('ui-sub-panel-close ui-sub-panel-animate')
        .removeClass("ui-sub-panel-open");
});