JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="Home">
            <div data-role="header" data-theme="b" data-position="fixed">
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal"> 
                    <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting">Setting</a>
                    <a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog" id="Add">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>

            <div id="here_table"> </div>   
        </div>

        <!-- Page two  Case Information Screen-------------------------->  

        <div data-role="page" id="CaseInformationScreen">
            <div data-role="header" data-theme="b" data-position="fixed">

                <a href="#" data-role="button" data-corners="false">Cancel</a>
                <h1>Case Information</h1>
                <a href="#" ddata-role="button" data-corners="false">Add</a>
            </div>

            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>  
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea-12">Textarea:</label>
                <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
            </div>
        </div>

JavaScript

$(document).ready(function() {
            // $('.ui-loader').remove();
            $.mobile.loading('hide');

        });
       




        $("#addbuttons").on("click", "a", function() {
          
            if ($(this).attr("id") == "Add") {
                $.mobile.changePage($("#CaseInformationScreen"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });
            } else if ($(this).attr("id") == "UserSettingScreen") {
                $.mobile.changePage($("#UserSettingScreen"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });
            } else if ($(this).attr("id") == "Edit") {
                $.mobile.changePage($("#secondpage"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });
            }

        });