JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <div class="square">
        <p>catch me!</p>
    </div>
</main>

CSS

* {
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.square {
    height: 200px;
    width: 200px;
    position: absolute;
    -webkit-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

      var second = document.querySelector('.square');

      if(second) {
          second.addEventListener("mouseenter", function() {
              var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
              var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
              this.style.left = maxX + 'px';
              this.style.top = maxY + 'px';
              this.style.transition = 'left 0.8s, top 0.8s';
          });
      }

 });