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(){
  $(".cont").mouseenter(function(){
    $(".cont2").animate({'height':'50px'},'slow')
  })
  $(".cont").mouseleave(function(){
    $(".cont2").delay('3000').animate({'height':'0px'},'slow') 
  });
});