JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<div id="drawer">
    The hidden drawer
</div>
<div id="logo">
    Normal State
</div>

CSS

#logo {
    width: 100px;
    height: 100px;
    background: #999;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 8px;
}
#drawer {
    width: 100%;
    min-height: 100px;
    background: rgba(0,0,0,0.3);
    display: none;
}

JavaScript

$("#logo").hover(function() {
    $("#drawer").show();
  }, function() {
    $("#drawer").hide();
  }
);