JSFiddle - React, Tailwind, and code Playground

HTML

<h2>cursor pointer</h2>
<div id="cursor"></div>

CSS

#cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid red;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: 0.3s color;
}

* {
  box-sizing: border-box;
}

*::after,
*::before {
  box-sizing: border-box;
}

JavaScript

var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x+'px';
  cursor.style.top = y+'px';

})