JSFiddle - React, Tailwind, and code Playground
HTML
<div class="animate"></div>
CSS
.animate {
height: 100px;
width: 100px;
background-color: #c00;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
top: 30%;
left: 0;
}
.animate.move {
left: 100%;
margin-left: -100px; /*.animate width*/
}
JavaScript
$('.animate').mouseenter(
function(){$(this).addClass("move");}
)