JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <div data-role="page" id="pagea">


       <div data-role="panel" data-display="overlay" id="menupanel" data-theme="a" data-position-fixed="true" data-position="left">

        <ul data-role="listview" data-icon="false">
   <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
           <li><a>Item</a></li>
          <li><a>Item</a></li>
     <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
             <li><a>Item</a></li>
          <li><a>Item</a></li>
           <li><a>Item</a></li>
          <li><a>Item</a></li>
         
      </ul>
    
    </div>


        <div data-role="header"...

CSS

.ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    width: 240px;
    max-width: 240px;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar { width: 0px; }

       body {
            margin: 0;
        }

        div#container {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

        div[data-role="header"] {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        div[data-role="content"] {
            position: absolute;
            top: 41px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .scrollable {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

            /* iOS specific fix, don't use it on Android devices */
        .scrollable > * {
            -webkit-transform: translateZ(0px);
        }

JavaScript

$(document).on("click", ".panelleft", function () {
$(document).one('mobileinit', function () {

            // Setting #container div as a jqm pageContainer
            $.mobile.pageContainer = $('#container');

        }); 
      
      
$( "#menupanel" ).panel( "toggle" );
});

$(document).on("click", ".page2", function(event){

$.mobile.changePage( "#pageb" , { transition: "pop" });
});

$(document).on("click", ".page1", function(event){

$.mobile.changePage( "#pagea" , { transition: "pop" });
});