JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hero"></div>

CSS

div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    position: absolute;
}

JavaScript

window.onload = function () {
	var timer, k, intervals, kX, kY,
		counter = 0,
		posX = hero.offsetLeft,
		posY = hero.offsetTop,
		anim = function (elem, params) {
			posX += kX;
			posY += kY;
			elem.style.left = posX + 'px';
			elem.style.top = posY + 'px';
			if (counter > intervals) {
				clearInterval(timer);
				counter = 0;
			} else {
				counter++;
			}
			return;
		},
		move = function (elem, params) {
			if (timer) {
				clearInterval(timer);
				counter = 0;
			}
			k = Math.atan2(params.left, params.top);
			kX = Math.sin(k);
			kY = Math.cos(k);
			intervals = Math.floor(Math.sqrt(Math.pow(params.left, 2) + Math.pow(params.top, 2)));
			timer = setInterval(function () {
				anim(elem, params);
				return;
			}, params.speed);
			return;
		};
	document.getElementById('hero').addEventListener('click', function (e) {
		move(e.currentTarget, {left: 100, top: 10, speed: 0});
		return;
	}, false);
	return;
}