JSFiddle - React, Tailwind, and code Playground

by ikbelkirasan

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 {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    clear: both;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    
    -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;
    
    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;
}