JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trans">
    <h1>HUE BR</h1> 
</div>

CSS

.trans {
	background: #F00;
	-webkit-transition: height .25s ease-in-out, opacity 0.3s ease;
	-moz-transition: height .25s ease-in-out, opacity 0.3s ease;
	-ms-transition: height .25s ease-in-out, opacity 0.3s ease;
	-o-transition: height .25s ease-in-out, opacity 0.3s ease;
	transition: height .25s ease-in-out, opacity 0.3s ease;
    height:0px;
    width:100%;
    opacity:1;
}

.trans:hover {
	height: 30px;
	opacity: .5;
}