JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div">
Animate Me!
</div>
<div class="nav">
<div class="start">start</div>
<div class="reset">reset</div>
</div>
CSS
.div {
position: absolute;
top: 150px;
left: 50px;
height: 100;
width: 100;
background-color: blue;
}
.start, .reset {
display: table-cell;
width:50%;
}
.start {
background-color:green;
}
.reset{
background-color:red;
}
}
.nav {
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 60px;
}
JavaScript
$( '.start' ).click(function(){
$('.div').animate({
left: '+=' + 100});
});
$( '.reset' ).click(function(event){
event.stopImmediatePropagation()
$('.div').animate({
left: 50});
});