JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    Hover to widen. Click to make animation slower.
</div>

CSS

#a { 
    background: red; 
    width: 200px;  
    -webkit-transition-property: width;       
    -webkit-transition-duration: 1s;        
    -webkit-transition-timing-function: ease-out;    
} 
#a:hover {
    width: 400px;
}

JavaScript

$('#a').click(function() {
    this.style['-webkit-transition-duration'] = '4s'; 
});