JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
  <div class="panel left panel-01" data-role="panel" data-position="left" data-display="push" id="panel-01">
    <ul data-role="listview" data-theme="a">
      <li><a href="#">My Profile</a></li>
      <li><a href="#">Recent Activities</a></li>
      <li><a href="#">FAQ </a></li>
      <li><a href="#">Terms and Use</a></li>
      <li><a href="#">Full Site</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Privacy Policy</a></li>
    </ul>
  </div>
<div data-role="page" id="home" data-position="fixed">
    <div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a>

         <h1>Home</h1>

    </div>
    <div data-role="content" class="content">content
        <div data-role="listview" style="margin:1em; border-radius:10px;">
            <ul data-role="listview" style="margin:1em; border-radius:10px;">
                <li><a href="#about">About us</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="footer">
        <!--<h4>Footer</h4>-->footer</div>
</div>
<div data-role="page" id="about" data-position="fixed">
    <div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a>

         <h1>About us</h1>

    </div>
    <div data-role="content" class="content">About us
        <div data-role="listview" style="margin:1em; border-radius:10px;">
            <ul data-role="listview" style="margin:1em; border-radius:10px;">
                <li><a href="#home">Home</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="footer">
        <!--<h4>Footer</h4>-->footer</div>
</div>

JavaScript

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