JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
      <span></span>
      <div></div>

    </div>

CSS

#container {
  background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5);
  background-image: linear-gradient(125deg, #35a28e, #a8e4a5);
  background-color: #6fc39a;
  height: 200px;
}
#container div {
  background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5);
  width: 75px;
  height: 75px;
  position: absolute;
  border-radius: 100px;
  opacity: 0.5
}

JavaScript

$(function() {
      $("#container").mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $("div", this).css({
          left: x - (75 / 2),
          top: y - (75 / 2)
        })
        $("span", this).html("X: " + x + " Y: " + y);
      }).mousemove();
    })