JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h1>test</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>test</h1><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>test</h1><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


<script>
    var pwidth = $(document).width();
    var pheight = $(document).height();

    
    $(document).scroll(function(e) {
        var top = $(this).scrollTop();
        
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

</script>
</body>

</html>