JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>


	<meta charset="utf-8" />
	<meta name="format-detection" content="telephone=no" />
	<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
	<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>


	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<meta name="msapplication-tap-highlight" content="no" />
	<title>Hello World</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>



	<style type="text/css">
		.ui-page  { 
			background:white;
		}

		a:link {
			text-decoration: none;
		}
		h4 {
			text-align: center;
		}

        .ui-tabs{
            position:static;
        }
            

	</style>
</head>


<body>

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


		<div data-role="panel" id="user-panel" data-display="overlay" data-swipe-close="false" >
			<ul data-role="listview" id="list" data-theme="b">

				<li  ><a href="login.html">HOME</a></li>
				<li  ><a href="#my-header">MEN</a></li>
				<li  ><a href="#my-header">WOMEN</a></li>
				<li  ><a href="#my-header">KIDS</a></li>
				<li  ><a href="#my-header">BRANDS</a></li>
				<li  ><a href="#my-header">SALE</a></li>
				<li  ><a href="#my-header">LOGIN</a></li>
			</ul>
		</div>





		<div data-role="header" data-position="fixed" class="ui-bar">
			<div align="center">
				<a href="#user-panel" data-role="button" data-icon="bars" style="float:left">&nbsp;</a>
				<h4>&nbsp;</h4>
				<a href="#" data-role="button" data-icon="shop" style="float:right">&nbsp;</a>
				<a href="#" data-role="button" data-icon="search" style="float:right">&nbsp;</a>

			</div>
		</div>





		<div data-role="tabs" id="tabs">

			<div...