JSFiddle - React, Tailwind, and code Playground

by Michael Borck

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Business Web Technologies (ISYS3004) -->
<!-- School of Information Systems        -->
<!------------------------------------------
Try this:
1.  Add a link on the second page that
    takes you to a new third page.
2.  Follow links to third pages
3.  Follow back buttons back to the home page.
--------------------------------------------->

  	
<!-- Home page -->
<div data-role="page" id="p1"> 
    <!-- Sepcify the header here -->
    <div  data-role="header">
        <h1>Home Page</h1>
    </div> 
    
    <!-- Content for the page goes here -->
    <div  data-role="content">
        <p>This is the home page.</p>
        <p>Go to the <a href="#p2">second page</a></p>
    </div> 
    
    <!-- footer is fixed to the bottom -->
    <div  data-role="footer" data-position="fixed">
        <h4>Brough to you by BWT</h4>
    </div> 
</div> 

<!-- Second page -->
<div data-role="page" id="p2" data-add-back-btn="true" data-back-btn-test="Previous">
    <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
    <div  data-role="content">
        <p>This is the second page</p>
        <p>Go to the <a href="#p3">third page</a></p>
    </div>
    <div  data-role="footer" data-position="fixed"><h4>Brought to you by BWT</h4></div>
</div> 


<!-- Third page -->
<div data-role="page" id="p3" data-add-back-btn="true" data-back-btn-test="Previous">
    <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
    <div  data-role="content">
        <p>This is the third page</p>
    </div>
    <div  data-role="footer" data-position="fixed"><h4>Brought to you by BWT</h4></div>
</div>