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 () {
if(!$(this).hasClass('move')){
$(this).addClass('move');
$('.div').animate({
left: '+=' + 100
});
}
});
$('.reset').click(function () {
$('.start').removeClass('move');
$('.div').animate({
left: 50
});
});