JSFiddle - React, Tailwind, and code Playground

by envira

HTML

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

CSS

.modal {
	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;
}

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

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

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

JavaScript

$(function() {
				$('.overlay').hide();
				$('.modalcon').hide();
				$('.modalprod').hide();
				
				$(".gac").click(function() {
					$('.modalcon').removeClass('animated bounceInDown fadeIn bounceOutUp');
					$('.overlay').removeClass('animated fadeIn');
					$('.overlay').show();
					$('.modalcon').show();
					$('.modalcon').addClass('animated bounceInDown');
					$('.overlay').addClass('animated fadeIn');
				});
				
				$(".prods").click(function() {
					$('.modalprod').removeClass('animated bounceInDown fadeIn bounceOutUp');
					$('.overlay').removeClass('animated fadeIn');
					$('.overlay').show();
					$('.modalprod').show();
					$('.modalprod').addClass('animated bounceInDown');
					$('.overlay').addClass('animated fadeIn');
				});
				
				$(".overlay").click(function() {
					$('.modal').removeClass('animated bounceInDown');
					$(this).removeClass('animated fadeIn');
					$('.modal').addClass('animated bounceOutUp');
					$('.overlay').fadeOut("slow");
				});
				$(".mbclose").click(function() {
					$('.modal').removeClass('animated bounceInDown');
					$('.overlay').removeClass('animated fadeIn');
					$('.modal').addClass('animated bounceOutUp');
					$('.overlay').fadeOut("slow");
				});
				$(".nav li").hover(function() {
					$(this).addClass('animated pulse');
				});
				$(".nav li").mouseleave(function() {
					$(this).removeClass('animated pulse');
				});
			});