JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="hoverbar">
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
#content{
    height:100%;
    width:100%;
    background-color:red;
    padding:0;
    margin:0;
    position:absolute;
}
#hoverbar{
    height:10%;
    width:100%;
    background-color:blue;
    position:absolute;
    bottom:0;
    margin:0;
    padding:0;
    visibility:hidden;
}
#content:hover + #hoverbar{
    visibility:visible;
}