JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-out">
<div id="header-in">
Content 
</div>
</div>

CSS

#header-out {
width:100%;
height:75px;
position:fixed;
top:0;
left:0;
z-index:999;
cursor: pointer;
background: #ccc;
opacity: 0.25;
}
#header-in {
width:90%;
margin:0 auto;
padding:0;
}

JavaScript

$(document).ready(function(){
$('#header-out').hover(function() {
    $(this).stop().animate({
        'opacity':'.80',
        'height': '400px'
    }, 800);

}, function() {
    $(this).stop().animate({
        'opacity':'.25',
        'height': '70px'
    }, 800);

});
});