JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/zepto/1.1.3/zepto.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/magnific-popup.css">
<h1><a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a></h1>

<form action="#">
	<label>
		<input type="radio" name="whatside" title="Left" value="Left">
		<span>Left</span>
	</label>

	<label>
		<input type="radio" name="whatside" title="Right" value="Right">
		<span>Right</span>
	</label>

	<div id="modal" class="white-popup-block mfp-hide">
		<h2>Modal dialog</h2>
			<button type="submit" value="Send">Send</button> 
		<a class="popup-modal-dismiss" href="#">Dismiss</a>
	</div>
</form>

CSS

body {font:115% "Trebuchet MS", Helvetica, sans-serif;}
h1 {text-align: center;}
a:link, a:visited {
	padding: 0.25em;
	background: #fff;
	color: steelblue;
	text-decoration: none;}
a:hover, a:focus {border-bottom: 0.0625em dashed steelblue;}
label {
	display: block;
	background: lightsteelblue;
	margin: 0.125em;
	padding: 0.5em;}
button {
	display: block;
	margin: 1em auto;}
#modal {
	margin: 0 auto;
	padding: 0.5em;
	width: 50%;
	background: #eee;
	font-size: 80%;}

JavaScript

$(document).ready(function() {
	$('input').magnificPopup({
		type: 'inline',
		items: {src: '#modal'},
		preloader: false,
		modal: true
	});
	$(document).on('click', '.popup-modal-dismiss', function (e) {
		e.preventDefault();
		$.magnificPopup.close();
        $('form')[0].reset();
	});
});