JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box"></div>
<button>Add</button>

CSS

div#box {
  width:400px;
  height:400px;
  background:black;
  position: relative;
}
div.elem {
  width: 40px;
  height: 40px;
  border: 1px solid white;
  border-radius: 50%;
  animation: luka 10s linear forwards;
  position: absolute;
}
@keyframes luka {
  50% { transform : translate(200px,-200px) }
  100% { transform : translate(400px,-400px) }
}

JavaScript

const a  = document.querySelector('button');
const c = document.querySelector('#box');
Add = function(){
	const b = document.createElement('div');
  b.className = 'elem';
  c.append(b);
}
AddInside = function(e){
	let x = e.clientX;
  let y = e.clientY;
  const b = document.createElement('div');
  b.className = 'elem';
  b.style.left = `${x}px`;
  b.style.top = `${y}px`;
  c.append(b);
}
a.addEventListener('click', Add);
c.addEventListener('click', AddInside);