JSFiddle - React, Tailwind, and code Playground

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() {
    $(".box").stop().slideDown("slow", function() {
        $(".box").effect("bounce", {
            times: 3, distance: 3
        }, 250);
    });

}, function() {
    $(".box").stop().slideUp();

});