JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://tympanus.net/Development/ModalWindowEffects/js/modalEffects.js"></script>
<script src="http://tympanus.net/Development/ModalWindowEffects/js/modernizr.custom.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Development/ModalWindowEffects/css/component.css">
<link rel="stylesheet" href="http://tympanus.net/Development/ModalWindowEffects/css/default.css">
<script src="http://tympanus.net/Development/ModalWindowEffects/js/cssParser.js"></script>
<script src="http://tympanus.net/Development/ModalWindowEffects/js/classie.js"></script>
<script src="http://tympanus.net/Development/ModalWindowEffects/js/css-filters-polyfill.js"></script>
<button class="md-trigger" data-modal="modal-2">Slide in (right)</button>
<div class="md-modal md-effect-2" id="modal-2">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>