JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" class="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
            <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a>
            </div>
        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folderData" >
            </ul>
            <!-- **************Case Information Pop up Start*******************-->
            <div data-role="popup" id="CaseInformationScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                <div data-role="header" data-theme="b" >

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

                <div data-role="content">
                    <div><img src="img/Documents.png"/></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"...

CSS

#text-12 {
    width: 100% !important;
    height: 50px !important;
    max-height: 50px !important;
}<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

JavaScript

$(document).on('pagebeforeshow', '.Home', function(){ 
    $(document).on( "popupafteropen", "#CaseInformationScreen",function( event, ui ) {
        var now = new Date();
        
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        
        var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
        
        $('#caseDate').attr('max', today);
        $('#caseDate').val(today);    
    });        
});

$(document).on('click', '#Cancel', function() {
    $("#AddButton").text('Add');
    $(".caseName_h").attr("readonly", false);
    $.mobile.changePage($(".Home"),{transition:'none'});
});