JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button class="modal-show" data-modal="#sign-in">Show window</button>
<div class="modal-wrap hide" >
	<div class="modal hide" id="sign-in">
		Our Modal windows
		<button class="modal-close" data-modal="#sign-in">Close</button>
		<button class="modal-close round-close" data-modal="#sign-in">X</button>

	</div>
</div>

CSS

.hide {
	display: none;
}

JavaScript

let opDataGrep = {
	events: {
		click: e => {
			if (e.target.classList.contains(`modal-show`) || e.target.classList.contains(`modal-close`)) {
				document.querySelector(e.target.dataset.modal).classList.toggle("hide");
			}
		},
	},
};

window.addEventListener(`click`, opDataGrep.events.click);