JSFiddle - React, Tailwind, and code Playground

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 data-role="page" id="home"  data-position="fixed">
  <div class="panel left panel-01" data-role="panel" data-position="left" data-display="push" id="panel-01">
    <ul data-role="listview">
      <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="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>