JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
         <h1>Long Page</h1>
 <a href="#short" data-transition="flip" data-role="button" data-theme="b"> DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>  
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>          
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
         <h1>Short Page</h1>
 <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short Page
    </div>
</div>

CSS

.box {
    width:100%;
    height:600px;
    background:#C00;
    border:1px solid #00C;
    color:#FFF;
}