JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<div id="container">
<div id="animate">
</div>
</div>
<button onclick="myMove()">click me
</button>
<script>
function myMove() {
    let elem = document.getElementById('animate');
    let pos = 0;
    let intervalId = setInterval(frame, 5);
    function frame() {
        if (pos === 350) {
            clearInterval(intervalId);
        } else {
        		pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
}
</script>
</body>
<style>
#container {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: blue;
}
#animate {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
}
</style>
</html>