JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
   <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
    <div id="hidden">
        <h2><a href="">Link1</a></h2>
        <h2><a href="">Link2</a></h2>
    </div>
</div>

CSS

#main {
width: 100%;
border: 1px solid #eee;
text-align: center;
 position: relative;
}

#hidden {
display:none;
border: 4px solid #eee;
}

#main:hover > #hidden {
    position: absolute;
    display: block;
    bottom: 0px;
}