JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div id="pageContainer">
    
    <div data-role="page" id="test1">

        <div data-role="header">
            <h1>Page 1 Header</h1>
        </div><!-- /header -->
        
        <a id="page2link">To Page 2</a>

        <div data-role="content" class="content1">    
            <p class="text1">This is page 1</p>        
        </div><!-- /content -->

        <div data-role="footer" data-id="foot" data-position="fixed">
            <h4>Page 1 Footer</h4>
        </div><!-- /footer -->
    
    </div><!-- /page -->
    
    
    
    <div data-role="page" id="test2">

        <div data-role="header">
            <h1>Page 2 Header</h1>
        </div>
    
        <a id="page1link">To Page 1</a>

        <div data-role="content" class="content2">
            <p class="text2">This is page 2<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes here.<br />
                Line of text goes...

CSS

a {
 cursor: hand;
 cursor: pointer;    
}

JavaScript

$(function() {
    
    // Hides the viewport scrollbars if present during animation
    // and sets it to 'auto' after 450ms which should allow the animation to complete.
    function scrollBars(){
        $('body').css({'overflow':'hidden'});
        setTimeout("$('body').css({'overflow':'auto'});", 550);
    }
    
    $.mobile.defaultPageTransition = "slide";    

    
    // Clicking will load the next page with page setting listed in CSS.
    $('#page2link').click(function() {
        scrollBars();
        $.mobile.changePage($('#test2'));
    });
        

    // Clicking will load the previous page with page settings intact.
    $('#page1link').click(function() {
        scrollBars();
        $.mobile.changePage($('#test1'), {reverse: true});
    });


});