JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/DialogEffects/css/dialog.css">
<link rel="stylesheet" href="http://tympanus.net/Development/DialogEffects/css/dialog-sandra.css">
<script src="http://tympanus.net/Development/DialogEffects/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Development/DialogEffects/js/dialogFx.js"></script>
<script src="http://tympanus.net/Development/DialogEffects/js/classie.js"></script>
<div class="button-wrap"><button data-dialog="somedialog" class="trigger">Open Dialog</button></div>

<div id="somedialog" class="dialog">
					<div class="dialog__overlay"></div>
					<div class="dialog__content">
						<h2><strong>Howdy</strong>, I'm a dialog box</h2><div><button class="action" data-dialog-close>Close</button></div>
					</div>
				</div>

<button onclick="dlg.toggle.bind(dlg)()" >my button which calls dlg.toggle.bind(dlg)()</button>

JavaScript

window.dlgtrigger = document.querySelector( '[data-dialog]' ),
					window.somedialog = document.getElementById( window.dlgtrigger.getAttribute( 'data-dialog' ) ),
					window.dlg = new DialogFx( window.somedialog );

				window.dlgtrigger.addEventListener( 'click', window.dlg.toggle.bind(window.dlg) );