JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">TEST</div>
STUFF<BR>STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>
STUFF<BR>

CSS

#test{
     position:absolute;
     top: 100px;
   left: 100px;
   background-color: blue;
   width: 200px;
   height: 200px; 
}

JavaScript

$("div").mouseleave(function(e){
    var $this = $(this);
    
    var bottom = $this.offset().top + $this.outerHeight();
   
   if(e.pageY >= bottom) alert("BOTTOM"); 
});