JSFiddle - React, Tailwind, and code Playground

by heera

HTML

<div id="testDiv">
    <div class='box'>Bar</div>
</div>

CSS

#testDiv
{
    width: 300px; 
    height: 300px; 
    background-color: aliceblue; 
    position: relative; 
    overflow: hidden;
}
.box {
    display:none;
    background-color: black; 
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%; 
    height: 30px;
}

JavaScript

$("#testDiv").hover(function(e) {
    $(".box").stop(true,true).animate({height: ['toggle',  'easeOutBounce']}, 'slow');
},
function(e) {
    $(".box").stop(true,true).animate({height: 'toggle'});

});