JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

html {cursor : crosshair}
#test {position: absolute; height: 200px; width: 200px; top: 200px; left: 200px; background: PaleVioletRed;}

JavaScript

$(document).on('mousemove', function(e) {
    var elm = $("#test"),
        x = ~Math.round((e.pageX - elm[0].offsetLeft - 150) / 30),
        y = ~Math.round((e.pageY - elm[0].offsetTop - 150) / 30),
        z = 10+Math.abs(x)+Math.abs(y),
        cssVal = x+'px '+y+'px '+z+'px 10px #525252';
    
    elm.css({'-webkit-box-shadow' : cssVal, 'box-shadow' : cssVal });
});