JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<div style="background: #FAFAFA">1</div>
<div style="background: #F5F5F5">2</div>
<div style="background: #EBEBEB">3</div>
<div style="background: #E0E0E0">4</div>
<div style="background: #B2B2B2">5</div>
<div style="background: #7F7F7F">6</div>
<div style="background: #141414">7</div>

<div id="t" style="background: #FDFDFD"></div>

CSS

html, body {
  height: 100%;
}

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
}

#t {
  position: absolute;
}

JavaScript

document.body.addEventListener('mousemove', e => {
  t.style.top = `${e.clientY - 50}px`;
  t.style.left = `${e.clientX - 50}px`;
})