JSFiddle - React, Tailwind, and code Playground

HTML

<div id="constraint">
    <img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG"/>
</div>

CSS

#image{
position:absolute;
}

#constraint {
    height: 400px;
    width: 500px;
    border: 1px solid black;
}

JavaScript

$(document).mousemove(function(e){
    var constraint = $('#constraint');
    var width = constraint.width();
    var height = constraint.height();
    
    var image = $("#image");
    
    if (e.pageX < width - image.width() && e.pageY < height - image.height()) image.css({left:e.pageX, top:e.pageY});
});