JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    
    <!-- Note that this script is placed between jQuery.js and jQuery.mobile.js -->
    <script>
        $(document).bind('mobileinit', function() {
            $(document).on('tap', function(e) {
                $('.activeOnce').removeClass($.mobile.activeBtnClass);
            });
        });
    </script>
        
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Active-Once Demo</h1>
    </div>

        <div data-role="main" class="ui-content">
                <br><br>
                <p>The "More" tab has the "activeOnce" hack.. in this example,<br>it's more of a "hide active", but you get the idea.</p>
                <br><br>
        </div>
    
    <div data-role="footer" style="overflow:hidden;">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid" class="ui-btn-active">One</a></li>
                <li><a href="#" data-icon="star">Two</a></li>
                <li><a href="#" data-icon="gear" class="activeOnce">More</a></li>
                 
            </ul>
        </div>
    </div>
</div>

</body>
</html>

CSS

p {
    text-align:center;
}