JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer" > 
    Footer Button
   <div class="slide">

    <a href="#"> footer content 1</a>
    <a href="#"> footer content 2</a>
    <a href="#"> footer content 3</a>

   </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.slide { 
    border:1px solid black;
    width:100%; 
    height:150px; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 25px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: 0px;
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
       background:#FFE4E1;
    }

JavaScript

$(".footer").hover(function () {
    $(this).animate({height: 250});
}, function(){
    $(this).animate({height: 25});
});