JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div class="cont">
      <div class="cont2">
      </div>
    </div>
  </body>
</html>

CSS

.cont
{
  width: 500px;
  height: 300px;
  position: relative;
  border: solid 1px red;
}

.cont2
{
  border: solid 1px green;
  position: absolute;
  bottom: 0;
  height: 0;
  width: 100%;
}

JavaScript

$(function(){
var timer = 10;
var i;
	$(".cont").mouseenter(function(){
		$(".cont2").stop(true,false).animate({'height':'35px'},'slow')
	})
	$(".cont").mouseleave(function(){
		for (i=timer;i>=0;i--) {
		   $(".cont2").delay(100);
		}
		$(".cont2").animate({'height':'0px'},'slow') 
	})	
});