JSFiddle - React, Tailwind, and code Playground

HTML

<div id="click_mi">Click</div>
<div id="popup">
	<div id="popup_text">
        Hello, world!
	</div>
</div>

CSS

#popup {
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	position: fixed;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
}
#popup_text {
	color: white;
	left: 50%;
	top: 50%;
	background-color: #bb272a;
	margin-left: -200px;
	margin-top: -100px;
	width: 400px;
	height: 200px;
	position: fixed;
}
#click_mi {
    width: 50px;
    border: 1px solid #000;
    cursor: pointer;
    text-align: center;
}

JavaScript

$('#popup').on('click', function(){
	$('#popup').fadeOut();
});
$('#click_mi').on('click', function(){
    $('#popup').fadeIn();
});