JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="http://www.modogodo.com/css/animate.css">
<div class="soloverlay animated fadeIn" style="display: none;"></div>
<div class="solmodal modalcon">
			<a href="#" class="mbclose">
				<i class="fa fa-times"></i>
			</a>
		</div>
<div class="solmodal mbox animated bounceInDown">
			<a href="#" class="mboxclose">
				close
			</a>
			<h1>Sorry!</h1>
			<h3>Our store is currently closed. Please check back soon!</h3>
		</div>
<li><a href="#" class="modallink">Our Products</a></li>

CSS

.solmodal {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2),0 3px 12px rgba(0,0,0,0.2);
	width: 400px;
	height: 300px;
	position: fixed;
	top: 30%;
	left: 50%;
	margin-left: -200px;
	z-index: 99999999999999990;
	box-sizing: border-box;
	padding: 20px;
	padding-top: 0;
}

.soloverlay {
	background: rgba(43,43,43,0.75);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999999999999999;
}

.mboxclose {
	float: right;
	color: rgba(0, 0, 0, .5);
	text-decoration: none;
	margin-right: -5px;
}

.mboxclose:hover {
	color: rgba(0, 0, 0, .8);
}

JavaScript

$(function() {
				$('.soloverlay').hide();
				$('.modalcon').hide();
				$('.mbox').hide();				
				$(".modallink").click(function() {
					$('.mbox').removeClass('animated bounceInDown fadeIn bounceOutUp');
					$('.soloverlay').removeClass('animated fadeIn');
					$('.soloverlay').show();
					$('.mbox').show();
					$('.mbox').addClass('animated bounceInDown');
					$('.soloverlay').addClass('animated fadeIn');
				});
				
				$(".soloverlay").click(function() {
					$('.solmodal').removeClass('animated bounceInDown');
					$(this).removeClass('animated fadeIn');
					$('.solmodal').addClass('animated bounceOutUp');
					$('.soloverlay').fadeOut("slow");
				});
				$(".mboxclose").click(function() {
					$('.solmodal').removeClass('animated bounceInDown');
					$('.soloverlay').removeClass('animated fadeIn');
					$('.solmodal').addClass('animated bounceOutUp');
					$('.soloverlay').fadeOut("slow");
				});
			});