JSFiddle - React, Tailwind, and code Playground
HTML
<div id="0" class="cursor"></div>
<div id="1" class="cursor"></div>
<div id="2" class="cursor"></div>
<div id="3" class="cursor"></div>
<div id="4" class="cursor"></div>
<div id="5" class="cursor"></div>
<div id="6" class="cursor"></div>
<div id="7" class="cursor"></div>
<div id="8" class="cursor"></div>
<div id="9" class="cursor"></div>
CSS
.cursor {
width: 12px;
height: 19px;
position: absolute;
background-image: url(https://i.imgur.com/h8imKBP.png);
}
JavaScript
var x, y;
window.onmousemove = function(e) {x=e.clientX; y=e.clientY;}
var p = [0,0,0,0,0,0,0,0,0,0];
window.setInterval(function() {
p.shift();
p.push([x, y]);
var diff = [x-p[0][0], y-p[0][1]];
for (var i = 0; i < 10; i++) {
var e = document.getElementById(i);
e.style.left = (p[9-i][0]+diff[0])+"px";
e.style.top = (p[9-i][1]+diff[1])+"px";
}
}, 10);