JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="box"></div>
</div>
<button id="btn_left">Animate left</button>
<button id="btn_right">Animate right</button>
<button id="btn_reset">Reset</button>
CSS
div#wrapper {
background:red;
height:100px;
width:100px;
}
div#box {
background:#98bf21;
height:100px;
width:100px;
position:relative;
left:10%;
}
JavaScript
$(function () {
$("#btn_left").click(function () {
$("#box").animate({
left: "-=100"
});
});
$("#btn_right").click(function () {
$("#box").animate({
left: "+=10%"
});
});
$("#btn_reset").click(function () {
$("#box").animate({
left: "10%"
});
});
});