JSFiddle - React, Tailwind, and code Playground

by Svetlana

HTML

<div id='myTestArea'>
  <div id='coords'>Двигайте курсор, чтобы узнать его координаты</div>
</div>

CSS

html,
body {
	height: 100%;
  margin: 0;
}

#myTestArea {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #543964;
}

#coords {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 10px;
}

JavaScript

const myArea = document.getElementById('myTestArea');
const textArea = document.getElementById('coords');
myArea.addEventListener("mousemove", watchMouse);

let scheduled = false;
function watchMouse(e) {
  if (!scheduled) {
  	scheduled = true;
    setTimeout(function() {
      scheduled = false;
     	
			textArea.innerHTML = 'Координаты ' + e.clientX + ' : ' + e.clientY;
      }, 250);
   	}
}