JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<span class="span"></span>
<div class="box">
  <div class="inner"></div>
</div>

CSS

div.box {
  width: 400px;
  height: 400px;
  background: black;
  position: relative;
  margin: 100px auto;
}
div.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: purple;
}

JavaScript

var a = document.querySelector('.inner');


a.addEventListener('mousemove',function(event){

	var b = document.querySelector('.span');
  
  var x = event.pageX - parent.offsetLeft;
  var y = event.pageY - parent.offsetTop;
  
  b.innerHTML = 'x => ' + x + 'y => ' + y;

})

/* let x = e.pageX - parent.offsetLeft;
  let y = e.pageY - parent.offsetTop; */