JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div{
 height:100px;
width:100px;
 background-color:red;   
}

JavaScript

$("div").mouseenter(function() {

    $(this).stop().animate({
        height: "300px"
    }, 5000)
		$(this).css('height', '300px');
});

$("div").mouseleave(function() {
		if($(this).height() > 300){
    $(this).stop().animate({
        height: "100px"
    }, 1000)
    }
    

});