JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="button">This is a Button
        <div class="content">This is the Hidden Div</div>
    </div>
</div>

CSS

#header #button {
    width:200px;
    background:#eee
}
#header #button:hover > .content {
    visibility:visible;
    opacity:1;
}
#header #button .content:hover {
    visibility:visible;
}
#header #button .content {
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
    opacity:0;
    clear: both;
    visibility: hidden;
    position: absolute;
    top: calc(1em + 8px);
    left:8px;
    width: 182px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}