JSFiddle - React, Tailwind, and code Playground

HTML

<center><h1>
this is a ball</h1>
<p>
it is purple</p>
<p>
this is my ball it moves 
</p></center 10 y/o strat lel >

<div id="gotUrBall" class="ball" style="transform: translateY(183px) translateX(88px);"></div>

CSS

.ball {
    border-radius: 30px;
    width: 50px;
    height: 50px;
    background: #ff00af;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1s;
}

JavaScript

var f = document.getElementById('gotUrBall');
    document.addEventListener('click', function(ev){
      f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
      f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
    },false);