JSFiddle - React, Tailwind, and code Playground

HTML

<div ID="FIXED">
  <div ID="CONTENT">
  </div>
</div>

CSS

#FIXED
{
  position:fixed;
  width:100%;
  height:100%;
  background-color:black;
  
}
#CONTENT
{
  position:relative;
  width:400px;
  height:400px;
  color:white;
  background-color:white;
  left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

JavaScript

let fixed = document.getElementById('FIXED');
let content = document.getElementById('CONTENT');

function fn(elem) {
	setTimeout(function() {
  	if (elem) {
    	elem.style.opacity = 0;
      elem.style.transition = '1s opacity';
    }
  }, 2000);
}

content.addEventListener('click', function(e) {
	e.stopPropagation();
	this.style.opacity = 0;
  this.style.transition = '1s opacity';
  fn(fixed);
});