JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centerdiv">
<div class="container">
        <div id="follower"></div>
</div></div>

CSS

#follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
  margin: -10px 0 0 -10px;
    display: none
}

.centerdiv {
    width:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.container
{
    width:150px;
    height:150px;   
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
}

JavaScript

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container').mousemove(function(e){
   $("#follower").show();
  var offset = $('.container').offset();
    console.log(e);
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
        $("#follower").hide(); 
});    

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});
    
}, 30);