JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<a id="slick-toggle" href="#"> toggle the box </a>
<div style="position:relative;outline:1px dashed green;padding:10px;">
<div id="slick-box" style="position:absolute;outline: 1px dashed hotpink; color:#fff; background-color:#000; opacity:0.8; filter:80;top:0px; left:0px ;">
<h2>music name </h2>
<p> This will be shown  and hidden</p>
<p> This will be shown  and hidden</p>
<p> This will be shown  and hidden</p>

    </div>
</div>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
</div>

JavaScript

$('#slick-box').hide();
$('#slick-toggle').mouseover(function() {
  $('#slick-box').show(1000);
})
    $(document).click(function() {$('#slick-box').hide();});