JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>
            page1
        </h1>
    </div>
    <div data-role="content">
        Content1</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page1-->

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>
            page2
        </h1>
    </div>
    <div data-role="content">
        Content2</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page2-->

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>
            page3
        </h1>
    </div>
    <div data-role="content">
        Content3</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page3-->