JSFiddle - React, Tailwind, and code Playground

by ravi1989

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="#UserSettingScreen" 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-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="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>
            <!--div data-role="content">
                       <div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
                </div-->
            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="here_table" >
                </ul>
                <!--- CaseInformationScreen Popup screen---------------------------->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
                    <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="#" 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>
              ...

CSS

.ui-page {

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }

JavaScript

$(document).on('pagebeforeshow', '#Home', function(){ 
    console.log("init");
    loadData();
});
    

var loadData = function() {
           for (i = 0; i < 40; i++) {
                 $('#here_table').append(
                 '<li class="row" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                );
        }     
        }