JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script type="text/javascript" src="http://flaviusmatis.github.io/easyModal.js/jquery.easyModal.js"></script>
<div id="modal1" style="display: none; position: fixed; z-index: 100004; left: 50%; top: 200px; margin-left: -300px; margin-top: 0px;">
	<p>Holy guacamole! Best check yo self, you’re not looking too good.</p>
</div>
<a id="open-modal1" href="#">alert panel</a>

CSS

#modal1 {
background: #FF2D55;
text-align: center;
width: 300px;
padding: 5px 0;
color: #FFF;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
font-weight: 600;
}

JavaScript

$('#modal1').easyModal({
	top: 200,
	overlay : 0.2
});

$('#modal2').easyModal({
	overlay : 0.4,
	overlayClose: false
});

$('#open-modal1').click(function(e){
	$('#modal1').trigger('openModal');
	e.preventDefault();
});

$('#open-modal2').click(function(e){
	$('#modal2').trigger('openModal');
	e.preventDefault();
});