JSFiddle - React, Tailwind, and code Playground

HTML

<button id="show">
Show
</button>
<button id="hide">
  Hide
 </button>

<div class="lightbox">
  lolore remem fwe fwe fw ef we fwf   wef wefef <br> asda da sd asd a d asd 
</div>

CSS

body {
  min-height: 100%;
}
.lightbox {
  width: 90%;
  height: 90vh;
  margin: auto;
  background: orangered;
  opacity: 0;
  display: none;
}

JavaScript

var show = document.getElementById("show");
var hide = document.getElementById("hide");
var lightbox = document.getElementsByClassName("lightbox")[0];

show.onclick = () => {
	lightbox.style.display='block';
  
  window.setTimeout(
    function removethis()
    {
      lightbox.style.opacity = "1";
  		lightbox.style.transition = "opacity .3s ease-in-out";
    }, 10);
}

hide.onclick = () => {
  lightbox.style.opacity = "0";
  lightbox.style.transition = "opacity .3s ease-in-out";
 
 window.setTimeout(
    function removethis()
    {
      lightbox.style.display='none';
    }, 300);
}