JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Computer World</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
/*this block should go in the styles.css file*/
.ui-panel-inner {
padding:0px; /*make the buttons flush edge to edge*/
}
.ui-controlgroup {
margin:0; /*make the buttons flush to the top*/
}
#header {
height:54px;
}
#bars-button {
margin:7px;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="b">
<div data-role="panel" id="navpanel" data-theme="a"
data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
<a href="#" data-role="button">Business</a>
<a href="#" data-role="button">Numbers</a>
<a href="#" data-role="button">Money</a>
<a href="#" data-role="button">People</a>
</div>
</div>
<div id="header" data-role="header" data-theme="b">
<a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a>
</div>
<div data-role="content">
<p><strong>Note: You can swipe right/left to show/close menu.</strong></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum...