JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<div data-role="tabs" id="tabs">
    <div data-role="header" style="overflow:hidden;">
        <h1>I'm a header</h1>
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#one" class="ui-btn-active">One</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
    </div>
    <div id="one" class="ui-body-d ui-content tabContent">
        <h1>First tab contents</h1>
    </div>
    <div id="two">
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>
</div>

CSS

#one{
    height:330px;
    overflow-y:scroll;
}

JavaScript

$(document).ready(function() {
    var $one = $('#one')
    for(var i=0; i<100; i++){
        $one.append('<br/>content');
    }
    
})