JSFiddle - React, Tailwind, and code Playground

HTML

<button id="openPopup">Open Popup</button><div class="overlay">
	<div class="popup">
		<!--All your popup related html goes here -->
		<span class="close">X</span>
		<h2 class="title">Subscribe</h2>
		<div class="content">
			Do you want to subscribe??
		</div>
		<div class="button_container">
			<div class="button cancel">No</div>
			<div class="button action">Yes</div>
		</div>
	</div>
</div>

CSS

.overlay{
    display:none;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,.7);
     background-size: 60px 60px;
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
}
.popup{
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:60%;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
 
}
.popup .close{
    position:absolute;
      	cursor:pointer;
    top:-10px;
    right:-10px;
    background-color: #000;
    border-radius: 30px;
    padding: 5px 6px;
    color: #fff;
    font-size: 10px;
}
.popup .title{
	padding: 10px;
    background-color: #4679bd;
    color: #fff;
    margin-top: 0px;
}
.popup .content{
	padding: 0px 10px 10px;
    border-bottom: 1px solid #d7d7d7;
}
.popup .button_container{
	padding:10px;
}
.popup .button_container .button{	
    display: inline-block;
    color: #fff;
    padding: 7px 10px;
      	cursor:pointer;
}
.popup .button_container .button.action{
  	float:right;
  	background-color: #4679bd;
}
.popup .button_container .button.cancel{
  	background-color:#ff0000;
}

JavaScript

$('#openPopup').click(function(){
	$('.overlay').css("display",'block');
});

$('.popup .close').click(function(){
	$('.overlay').css("display",'none');
});
$('.overlay').click(function(){
	$('.overlay').css("display",'none');
});

$('.popup').click(function(event){
	event.stopPropagation();
});