JSFiddle - React, Tailwind, and code Playground

by anpsmn

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: rgba(125,135,105,.25);
    transition: all 0.6s linear;
}
#header-out:hover {
    transition: all 0.6s linear;
    background: rgba(45,65,135,.80);
    height: 400px;  
    color: #fff;
}
#header-in {
    width:90%;
    margin:0 auto;
    padding:0;
}