JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    hover
</div>

CSS

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

JavaScript

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