JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hoverme" id="elem" >
  &nbsp;  
</div>

CSS

.hoverme {
    width: 50px;
    height: 50px;
    background-color: violet;
    cursor: pointer;
    opacity: 1;
    -ms-transition: opacity 2s ease;
    transition: opacity 2s ease;
}
.hoverme:hover { 
    opacity: 0.4;
}

JavaScript

function transition(handle, prop, dur, ease) {
    handle.css({
        '-webkit-transition': '-webkit-' + prop + ' ' + dur + 'ms ' + ease,
            '-moz-transition': '-moz-' + prop + ' ' + dur + 'ms ' + ease,
            '-ms-transition': '-ms-' + prop + ' ' + dur + 'ms ' + ease,
            '-o-transition': '-o-' + prop + ' ' + dur + 'ms ' + ease,
            'transition': prop + ' ' + dur + 'ms ' + ease
    });
}

$(document).ready(function(){
    transition( $("#elem"), "opacity", "2000", "ease" );
});