JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centro">
    <div class="conteudo">Olá mister! Vamos lá ser o melhor País de Programação! (ou melhor já somos!)<a href="#" class="fechar">FECHAR</a><div class="textarea"></div></div>
    
    
    
    
</div>
<div>Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background Texto simulado do teu background <a href="#" class="abrir">ABRIR</a></div>
<textarea>escreve aqui qualquer coisa :) </textarea>

CSS

body {
    margin:0px;
    padding:0px; 
   font-family: verdana; 
} 

.textarea {
    border:1px solid blue;
  min-height: 100px;  
}

div.centro {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index:1000;
}
div.conteudo{
    background: white;
    width: 500px;
    height: 300px;position: relative;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
    padding:5px;
}

JavaScript

$(".fechar").click(function() {
    $(".centro").fadeOut();

});
$(".abrir").click(function() {
    $(".centro").fadeIn();
    $(".textarea").html($("textarea").val());
});