JSFiddle - React, Tailwind, and code Playground

HTML

<button id="myBtn">Open modal</button>
		<div id="myModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p> modal hui</p>
			</div>
		</div>
		<script src="script.js"></script>

		<button id="raz">Open modal</button>
		<div id="two" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p> modal 2</p>
			</div>
		</div>
    		<button id="there">Open modal</button>
		<div id="thereon" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p> modal 3</p>
			</div>
		</div>

CSS

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
}
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

JavaScript

var modalz = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var spa = document.getElementsByClassName("close")[0];

btn.onclick = function() {
	modalz.style.display = "block";
}
spa.onclick = function() {
	modalz.style.display = "none";
}

window.onclick = function (event) {
	if (event.target == modalz) {
		modalz.style.display = "none";
	}
}

var two = document.getElementById('two');
var raz = document.getElementById("raz");
var spaned = document.getElementsByClassName("close")[0];

raz.onclick = function(e) {
	two.style.display = "block";
  e.stopPropagation();
}
spaned.onclick = function() {
	two.style.display = "none";
}

window.addEventListener ('click', function (event) {
  if (event.target != two.querySelector(".modal-content")) {
    two.style.display = "none";
  } 
});

var thereon = document.getElementById('thereon');
var there = document.getElementById("there");
var spaneld = document.getElementsByClassName("close")[0];

there.onclick = function(e) {
	thereon.style.display = "block";
  e.stopPropagation();
}
spaneld.onclick = function() {
	thereon.style.display = "none";
}

window.addEventListener ('click', function (event) {
  if (event.target != thereon.querySelector(".modal-content")) {
    thereon.style.display = "none";
  } 
});