JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

CSS

p {
  padding-left: 60px;
  padding-top: 10px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
}

JavaScript

var f = document.getElementById('foo');
document.addEventListener('click', function(ev) {
  f.style.left = (ev.clientX - 25) + 'px';
  f.style.top = (ev.clientY - 25) + 'px';
}, false);