JSFiddle - React, Tailwind, and code Playground

by kisonic

HTML

<a href="#popup">Show popup</a>
<div class="popup_window_wrap" id='popup'>
	<div class="popup_window">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, eos, eum eveniet cumque sit natus veniam libero ea quisquam fuga quis placeat soluta accusamus debitis voluptatibus quasi molestiae! Labore, delectus.</p>
		<a href="#">Close popup</a>
	</div>
</div>

CSS

.popup_window_wrap {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	display: none;
	background-color:rgba(0,0,0,0.7);
	overflow:auto;
}
.popup_window_wrap:target {
	display: block;
}
.popup_window {
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height:220px;
	width: 220px;
	padding: 10px 20px;
	background-color:#fff;
}