JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <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/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<div id="page1" data-role="page">    
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="tab ui-btn-active">Inbound</a></li>
                <li><a href="#" class="tab">Outbound</a></li>
            </ul>
        </div>
        <ul id="ph" data-role="listview" data-inset="true">
            <li>placeholder</li>
        </ul>
        <ul id="log" data-role="listview" data-inset="true">
        </ul>
    
    </div>
</div>

<script>
var curTab;

$(document).on("pageinit", "#page1", function() {
    $("a.tab").click(function(event){
        var item = $(this).text();
        if (curTab !== item) {
            $("#ph").html("<li><a href=\"#\">" + item + 
                " message 1</a></li><li><a href=\"#\">" + item + 
                " message 2</a></li>").listview("refresh");
                console.log(item + ": now active");
                $("#log").append("<li>" + item + ": now active</li>").listview("refresh");
            
        } else {
            console.log(item + ": do nothing");
            $("#log").append("<li>" + item + ": do nothing</li>").listview("refresh");
        }
        curTab = item;
    });
});

$(document).on("pagebeforeshow", "#page1", function() {
    $("a.tab").first().click();
});

</script>
</body>
</html>

JavaScript

var curTab;

$(document).on("pageinit", "#page1", function() {
    $("a.tab").click(function(event){
        var item = $(this).text();
        if (curTab !== item) {
            $("#ph").html("<li><a href=\"#\">" + item + 
                " message 1</a></li><li><a href=\"#\">" + item + 
                " message 2</a></li>").listview("refresh");
                console.log(item + ": now active");
                $("#log").append("<li>" + item + ": now active</li>").listview("refresh");
            
        } else {
            console.log(item + ": do nothing");
            $("#log").append("<li>" + item + ": do nothing</li>").listview("refresh");
        }
        curTab = item;
    });
});

$(document).on("pagebeforeshow", "#page1", function() {
    $("a.tab").first().click();
});