JSFiddle - React, Tailwind, and code Playground

by juanojeda

HTML

<div><a href="#" class="menuTab">Hover me to see menu</a>
    <div class="megamenu">put your fancy menu content here</div>
</div>

CSS

a.menuTab {
    display: block;
    border: 1px solid #eee;
    padding: 1em;
    font-weight: bold;
}
div.megamenu {
    height: 0;
    overflow: hidden;
    border: 0px solid #fff;
    -webkit-transition: all 0.3s ease-in-out;
}

a:hover + .megamenu {
   height: 300px;
   border: 1px solid #000;
   
}