JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element"></div>
<button id="leftBtn" type="button">Left</button>
<button id="resetBtn" type="button">Reset</button>
<button id="rightBtn" type="button">Right</button>

CSS

/* CSS */
 .element {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: red;
    margin-left: 220px;
    transition: transform 0.5s linear;
}
.element.left {
    transform: translateX(-200px);
}
.element.right {
    transform: translateX(200px);
}

JavaScript

var toLeft = function () {
    $('.element').removeClass('right').addClass('left');
};

var toRight = function () {
    $('.element').removeClass('left').addClass('right');
};

var reset = function () {
    $('.element').removeClass('left right');
};

$('#leftBtn').on('click', toLeft);
$('#rightBtn').on('click', toRight);
$('#resetBtn').on('click', reset);