JSFiddle - React, Tailwind, and code Playground

by Wendell Christian

HTML

<div class="bloco">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel volutpat tellus. Ut ultricies ac nisl sed pharetra. Pellentesque nec accumsan tellus. Sed eget hendrerit massa, eu aliquam ipsum. Suspendisse scelerisque auctor ligula, ut placerat nisl lobortis eget. Aenean non dolor et est gravida consequat. Integer venenatis, turpis ut sagittis tristique, lectus urna interdum risus, vitae vestibulum erat odio non lorem. Fusce vel nisl sit amet velit consectetur pulvinar non eget lacus. Donec eget vulputate enim, faucibus blandit elit. Morbi vitae nibh leo. Etiam et pharetra magna. Quisque eget blandit ligula, ut fringilla mi.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel volutpat tellus. Ut ultricies ac nisl sed pharetra. Pellentesque nec accumsan tellus. Sed eget hendrerit massa, eu aliquam ipsum. Suspendisse scelerisque auctor ligula, ut placerat nisl lobortis eget. Aenean non dolor et est gravida consequat. Integer venenatis, turpis ut sagittis tristique, lectus urna interdum risus, vitae vestibulum erat odio non lorem. Fusce vel nisl sit amet velit consectetur pulvinar non eget lacus. Donec eget vulputate enim, faucibus blandit elit. Morbi vitae nibh leo. Etiam et pharetra magna. Quisque eget blandit ligula, ut fringilla mi.
  </p>
</div>


<a href="#" class="button">Show Content</a>

<div id="hidden_content">
 <p>
   Content
 </p> 
  <a id="botao_fechar">X</a>
</div>

CSS

#hidden_content{
  width:100%;
  height:100vh;
  display:none;
  position:absolute;
  top:0;
  right:0;
  background:rgba(51, 51, 51, 0.6);
}

.bloco{
  width:400px;
  height: 500px;
  padding-top:150px;
  padding-left:150px;
  background:#ccc;
  z-index:1;
}

#botao_fechar {
  width:20px;
  height:20px;
  padding:5px;
  text-align:center;
}

JavaScript

$(document).ready(function() {

    $(".button").click(function(){
        $("#hidden_content").slideToggle("slow");
    });
    
    $("#botao_fechar").click(function(){
        $("#hidden_content").hide();
    });
    
});