JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<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.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    
    <script>
        var i = 0;
    
        $(document).bind("ready", function(){

            console.log($('#footerel'));
            
            $('#header').waypoint(function (a, b) {
                
                console.log("header", a, b);
            });
            
            for(; i<20; i++)
            {
    
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i + "</h3><p>z</p></a></li>"));
            }
            
            $("#list").listview('refresh');
            
            $('#footer').waypoint(function (a, b) {
                
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i++ + "</h3><p>z</p></a></li>"));
                $("#list").listview('refresh');
                $('#footer').waypoint({ offset: '100%'    });
            }, { offset: '100%'    });
            
        });
    </script>
    
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
</head> 
<body> 

<div data-role="page">
    
    

    <div id="header" data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div class="content-primary">    
            <ul data-role="listview" id="list">
            </ul>
        </div>
    </div><!-- /content -->
    
    <div id="footer" data-role="footer">
        <h1>My Footer</h1>
    </div><!-- /header -->

</div><!-- /page -->

</body>
</html>