JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <p>
        <button onclick="myMove()">Click Me</button>
    </p>

    <div id="container">
        <div id="animate"></div>
    </div>

</body>

CSS

#container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
    }

    #animate {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;

    }

JavaScript

function myMove() {
    var parent = document.getElementById("container");
    var elem = document.getElementById("animate");
    var id = setInterval(frame, 5);
    var sigue = true;
    var sigueY = false;
    var sigueX = false;
    var x = 0;
    var y = 0;

    function frame() {
        if (parent.getBoundingClientRect().right === elem.getBoundingClientRect().right) {
            sigue = false;
        }
        if (parent.getBoundingClientRect().left === elem.getBoundingClientRect().left) {
            sigue = true;
        }
        if (sigue) {
            y++;
            x++;
            elem.style.top = y + 'px';
            elem.style.left = x + 'px';
        } else {
            y--;
            x--;
            elem.style.top = y + 'px';
            elem.style.left = x + 'px';

        }

    }
}