JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="wrap">
	
<h3>fancyBox v2 - login box</h3>

<a id="top-login-button" href="#login_form_ajax" rel="gallery">Open login form</a>

</div>

<div style="display:none">
	
	<form id="ml-form" class="site-form" method="post" action="">
	
	<p id="form_error" style="background: #ff0000; color: #fff;">Please enter data</p>
	<p id="name_error" style="background: #ff0000; color: #fff;">Don't forget your name</p>
	<p id="email_error" style="background: #ff0000; color: #fff;">We need  your email too</p>
	<p id="list_error" style="background: #ff0000; color: #fff;">Please select a list to subscribe to</p>
	
    
    <p id="ml-header">Mailing list sign up form</p>
    
    <table id="ml-form-table">
        <tr>
            <td class="form-field"><label for="name">Name: </label></td>
            <td><input type="text" id="name" name="name" /></td>
        </tr>
        <tr>
            <td class="form-field"><label for="email">Email: </label></td>
            <td><input type="text" name="email" id="email" /></td>
        </tr>
        <tr>
            <td class="form-field"><label for="institution">*Institution: </label></td>
            <td><input type="text" name="institution" id="institution" value="optional" onfocus="this.value='';" /></td>
        </tr>
		<tr><td>&nbsp;</td></tr>
        <tr>
            <td><input id="mailing_list" class="td-heading" type="checkbox" name="mailing_list" /></td>
			<td><label for="mailing_list">All Mailers</label></td>
		</tr>
		<tr>
			<td><input id="user_group" class="td-heading" type="checkbox" name="user_group" /></td>
			<td><label for="user_group">User Group Meetings</label></td>
		</tr>
		<tr>
			<td><input id="product_updates" class="td-heading" type="checkbox" name="product_updates" /></td>
			<td><label for="product_updates"></label>Product Updates</td>
      ...

CSS

a {
	outline: 0 none;
}

body {
	overflow-y: scroll;
}

#wrap {
	width: 800px;
	margin: 20px auto;
}

#form_error, #name_error, #email_error {
	display: none;
}

.form-field {
	text-align: right;
}

.td-heading {
	float: right;
}

#ml-form {
	font: normal 16px/1.3em Helvetica, Verdana, Arial;
}

#ml-header {
	font-weight: bold;
	color: #6d6e71;
	text-align: center;
}

#form-error {
	display: none;
	color: white;
	font-weight: bold;
	background-color: red;
	text-align: center;
}

#ml-form-table {
	display: block;
	margin: auto;
	font-size: 0.8em;
	font-weight: bold;
	padding-left: 25px;
}

#buttons {
	margin-left: 20%;
	margin-right: 20%;
}

#send-request, #cancel {
	display: inline;
}

JavaScript

$.fancybox.showLoading();