JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<div></div>
<span></span>
<p></p>

CSS

div {
  margin: 10px;
  width: 200px;
  height: 100px;
  background-color: #abcdef;
}

JavaScript

const div = document.querySelector('div');
const span = document.querySelector('span');
const p = document.querySelector('p');

const rect = div.getBoundingClientRect();
span.innerText = `{ top: ${rect.top}, bottom: ${rect.bottom} }`

div.addEventListener('mousemove', e => {
  p.innerText = e.clientY;
})