JSFiddle - React, Tailwind, and code Playground

HTML

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

<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
    <h1>Foo</h1>
</div><!-- /header -->

<div data-role="content">
    <ul data-role="listview">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul> 
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>      
    <p><a href="#foo">Back to foo</a></p>   
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

CSS

html, body {
    height : 100%;
}
.ui-mobile .ui-page, .ui-mobile .ui-page .ui-content {
    height : 100%;
}
.ui-mobile .ui-page .ui-content .ui-listview {
    
    top      : 50%;
    left:25%;
    width:50%;
}