JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div id="container">

    <div id="cube"></div>

</div>

CSS

body { overflow:hidden; position:absolute; height:100%; width:100%; background:#efefef; }

#cube {
  height:50px;
  width:50px;
  margin-top:-25px;
  margin-left:-25px;
  background:red;
  position:absolute;
  top:50%;
  left:50%;   
}

JavaScript

$(document).ready(function() {
    $("body").mousemove(function (e) {
        $("#cube").stop();
            handleMouseMove(e);
        });

    function handleMouseMove(event) {

      var x = event.pageX,
          y = event.pageY;

          $("#cube").animate({
            left: x,
            top: y
          }, 10);

    }
});