JSFiddle - React, Tailwind, and code Playground

HTML

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <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 class="txtwrapper">
    <div data-role="page">

        <div data-role="header">
            <h1>My Title</h1>
            <a href="#settings" data-icon="gear">Settings</a>
        </div><!-- /header -->
    
        <div data-role="content">    
            <p>Hello world</p>            
        </div><!-- /content -->
    
    </div><!-- /page -->
    
    <div id="settings" data-role="page">
            <div data-role="header">
                <a href="#" data-rel="back" data-icon="back">Back</a>
                <h1>Settings</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li><a href="#" class="small">Small</a></li>    
                    <li><a href="#" class="med">Medium</a></li>    
                    <li><a href="#" class="large">Large</a></li>    
                </ul>
            </div>
    </div>
</div>
</body>

CSS

.txtwrapper{
    font-size: 20px;
}

JavaScript

$(document).on('vclick', '.small', function(e){
    $(".txtwrapper").css('font-size', '15px');
});

$(document).on('vclick', '.med', function(e){
    $(".txtwrapper").css('font-size', '20px');
});

$(document).on('vclick', '.large', function(e){
    $(".txtwrapper").css('font-size', '25px');
});