JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 

<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Single page</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
                <BR>content
        
    </div><!-- /content -->
    
    <div data-role="footer">
        <h4>Footer content</h4>
    </div><!-- /footer -->
    
</div><!-- /page -->

</body>
</html>

JavaScript

$(window).scroll(function(){
     if($(window).scrollTop() == $(document).height() - $(window).height()){
          alert("The Bottom");
     }
});