JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="link">open/close</a>
<div id="slide">
    <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
    <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
</div>

CSS

#page_content {background: #ccc}

#link {
    z-index: 1000;
    position: absolute;
    top:0;
    left:0;
    
}
#slide {
    display: none;
    position: absolute;
    top:0;
    left:0;
    z-index: 500;
    border: red thin solid;
    background: rgba(255, 255, 255, 0.7)
}

JavaScript

$('#link').click(function() {
  $('#slide').slideToggle('slow', function() {
  });
});