JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="hidden-box">
        <p>Hello!</p>
    </div>
</div>

CSS

.box { 
    position: relative;
    overflow: hidden;

    width: 200px;
    height: 200px;
    background: #3c3c3c;
}
.hidden-box {
    position: absolute;
    bottom: -20px;

    width: 200px;  
    background: #000;
    color: #fff;
}

JavaScript

$(".box").click(  
        function(){            $(this).children("div.hidden-box").stop().animate({bottom: -400}, 500);  
        },  
        function(){              $(this).children("div.hidden-box").stop().animate({bottom: -20}, 500);  
});