JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="circle"></div>
</div>
CSS
#container {
overflow:hidden;
position:absolute;
height:50%;
width:100%;
}
#circle {
height:50px;
width:50px;
margin-top:-32px;
margin-left:-32px;
background:red;
position:absolute;
top:50%;
left:50%;
border-radius: 50px;
}
JavaScript
$(document).ready(function () {
$("body").mousemove(function (e) {
handleMouseMove(e);
});
function handleMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
$("#circle").animate({
left: x,
top: y
}, 1);
}
});