JSFiddle - React, Tailwind, and code Playground

HTML

<div id="31924">
click me
</div>

<div class="overlay" id="63848">now click the overlay to fadeOut</div>
<div class="modal" id="21">MODAL</div>

CSS

html, body{
  height: 100%;
  width: 100%;
}

.overlay{
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: black;
  position: absolute;
  top: 0;
}

.modal{
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top 30px;
  left: 30px;
  background: red;
}

JavaScript

$('document').ready(function(){

	$('#31924').click(function(){
  	$('#63848').fadeIn();
    $('#21').fadeIn();
  });
  
  $('#63848').on('click', function(){
  	$('#63848').fadeOut();
    $('#21').fadeOut();
  });

});