JSFiddle - React, Tailwind, and code Playground

HTML

<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>

CSS

.box {
    margin-left: 30px;
    height: 50px;
    width: 50px;
    background-color: blue;
}
.box.horizTranslate {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    margin-left: 200px !important;
}
.box.last {
    margin-left: 30px !important;
    -webkit-transition: 3s;
}

JavaScript

var boxOne = document.getElementsByClassName('box')[0];
var check = 1;
var skuska = 1;

document.getElementsByClassName('toggleButton')[0].onclick = function () {
    if (this.innerHTML === 'Play') {
        if (skuska) {

            this.innerHTML = 'Pause';
            boxOne.classList.add('horizTranslate');
            skuska = 0;
        } else {

            this.innerHTML = "Pause";
            boxOne.classList.add('last');
            skuska = 1;
        }
    } else if (this.innerHTML === "Pause") {
        if (check) {
            this.innerHTML = 'Play';
            var g = window.getComputedStyle(boxOne);
            var margin = g.getPropertyValue('margin-left');
            boxOne.style.marginLeft = margin;
            boxOne.classList.remove('horizTranslate');
            check = 0;
        } else {
            this.innerHTML = "Play";
            var m = window.getComputedStyle(boxOne);
            var x = m.getPropertyValue("margin-left");
            boxOne.style.marginLeft = x;
            boxOne.classList.remove("last");
            check = 1;
        }
    }
    var cesta=setInterval(function(){torek()},2000);
    setTimeout(pwn,3000)
}

function torek() {
    var tlacitko = document.getElementsByClassName('toggleButton')[0];
    var styl = window.getComputedStyle(boxOne);
    if (styl.getPropertyValue('margin-left') == 30 + "px" || styl.getPropertyValue('margin-left') == 200 + "px") {
        tlacitko.innerHTML = 'Play'
    };
}

function pwn(){
    clearInterval(cesta)
}