JSFiddle - React, Tailwind, and code Playground

HTML

<script>
//Mensaje con las coordenadas del cursor dentro de la página 
function ejemplo2 (evento) {
  alert('Hiciste click en coordenadas: ' + evento.clientX + ', ' + evento.clientY + ' con botón ' + evento.button);
}
//Nos informa de las coordenadas del cursor DENTRO de "elemento" 
function ejemplo3 (evento) {
  var elemento = evento.target;
  escribirEtiqueta ('Ahora estás en coordenadas: ' + (evento.clientX - elemento.offsetLeft) + ', ' + (evento.clientY - elemento.offsetTop));
}
//Funciones auxiliares para mensajes en pantalla 
function resetearEtiqueta () { escribirEtiqueta('Pincha en lo verde'); }
function escribirEtiqueta (texto) { document.querySelector('#texto').innerHTML = texto; }
</script> 
<div
  style='background-color:green; color:white; width:300px; height:300px; margin:auto; text-align:center; display: flex; justify-content: center; align-items: center;'
  onmousedown='ejemplo2(event)' //Evento cuando se hace click
  onmousemove='ejemplo3(event)' //Evento cuanto se mueve el ratón por encima
  onmouseleave='resetearEtiqueta()' //Evento cuando el cursor sale del elemento
>
<span id='texto'><script>resetearEtiqueta()</script></span>
</div>