JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickme">click me</div>
<div id="bg" class="bg">
  <div id="inner">
    <h2>content area</h2>
    <div id="btn">click me</div>
  </div>
</div>

CSS

body {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0
}
#bg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
}
#bg.show {
  display: block;
}
#inner {
  width: 200px;
  height: 200px;
  background: #fff;
}

JavaScript

var $ = function(elem) {
	return document.getElementById(elem)
}

$('clickme').onclick = function() {
	$('bg').classList.add('show')
}
$('bg').onclick = function(e) {
	if(e.target.classList.contains('bg')) {
  	this.classList.remove('show')
  }
}
$('btn').onclick = function() {
	$('bg').classList.remove('show')
}