JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    hover
</div>

CSS

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 90%;
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
    left: calc(90% - 4rem)
}

JavaScript

$(document)
.on( 'mouseenter', 'div', function(){
	$(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
	$('div').removeClass('translate-less');
})