JSFiddle - React, Tailwind, and code Playground

by Daniel Lisik

HTML

<div id="menu">
    <div class="meta_button">
        <div class="button">hej
        </div>
        <div class="sub">yo
        </div>
    </div>
    
    <div class="meta_button">
        <div class="button">hej
        </div>
        <div class="sub">yo
        </div>
    </div>

</div>

CSS

html, body { background:#eee; height:400px; position:relative; }

#menu { position:absolute; bottom:0; left:0; float:left; }

.meta_button { top:0; display:inline-block; height:40px; overflow:hidden; }
.button { display:block; width:120px; background:#ddd; height:40px; }

.sub { transition:margin 0.2 ease; display:block; width:120px; height:60px; background:yellow; }

.meta_button:hover { height:100px; }