JSFiddle - React, Tailwind, and code Playground

HTML

<p><i></i></p>
<p><i></i></p>

CSS

html, body {
  height: 100%;
  margin: 0;
}
body, i {
  display: flex;
  align-items: center;
  justify-content: center;
}
p, i {
  aspect-ratio: 1/1;
  width: 12vw;
  border: 1px solid black;
  border-radius: 12vw;
}
i {
  width: 6vw;
  position: relative;
  background: black;
}

JavaScript

window.onmousemove = ({clientX, clientY}) => document.querySelectorAll("i").forEach(({style}) => [style.left, style.top] = [`${6*clientX/window.innerWidth}vw`, `${6*clientY/window.innerHeight}vw`]);