JSFiddle - React, Tailwind, and code Playground

by Solomon Mokua

HTML

<a href="#popup" class="popup-open">Open Pop up</a>
<!-- pop up -->
<div class="popup-bg" id="popup">
	<div class="popup-content">
	    <a href="#" class="close-popup">X</a>
		<h2>Hello I am a Pop up</h2>
		<p>
			Lorem ipsum dolor sit amet, vel wisi falli conceptam no, inciderint conclusionemque no cum. Democritum efficiantur te ius, nam omittantur accommodare eu. Mel ei homero liberavisse, ex sit tation ceteros. At falli elitr eirmod quo, falli ignota impedit sit cu. Te quo tota complectitur definitionem.
		</p>
	</div>
</div>

CSS

.popup-open{
	text-decoration: none;
	color: #fff;
	padding: 10px;
	background: #93cc76; 
}
.popup-bg{
	background: rgba(0,0,0,0.7);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	visibility: hidden;
	z-index: 9999;
}
.popup-content{
	width: 40%;
	margin: 10% auto;
	padding: 15px;
	background: #fff;
}
.close-popup{
	background:#EF2929;
	color: #fff;
	padding: 10px;
	text-decoration: none;
	float: right;
}
#popup:target{
	visibility: visible;
}