JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class="randomMove"></div>
<div class="randomMove"></div>
<div class="randomMove"></div>
<div class="randomMove"></div>

CSS

body{
  padding:100px;
}
.randomMove{
  width:50px;
  height:50px;
  border-radius:100%;
  background:gray;
  margin:20px;
  display:inline-block;
  transition:1s;
  position:relative;
  
}

JavaScript

document.querySelectorAll(".randomMove").forEach((e)=>{
e.addEventListener("mouseenter",(evt)=>{
	var number = 30;
	evt.target.style.transform = "translateX("+(Math.random()*number - number/2)+"px) translateY("+(Math.random()*number - number/2)+"px)"
})
e.addEventListener("mouseleave",(evt)=>{
	evt.target.style.transform = "";
})
})