JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<h2>music name </h2>    
<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>

JavaScript

$(document).ready(function() {
$('#slick-box').hide();
$('#slick-toggle').mouseover(function() {
  $('#slick-box').show(400);
})
$('#slick-toggle').mouseout(function(){
$('#slick-box').hide();});
});