JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
 <!DOCTYPE html>
       <script type="text/javascript" src="js/jquery.reveal.js"></script>


<body>
       <form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform" class="myform" method="POST" name="myform" target="hidden-form">
    <!-- edit form styles: rounded corners, seperation between field and label -->
    <div class="row" id="form">
      <div class="small-11 medium-8 large-7 small-centered columns">
          <div class="form-field columns">
            <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
            <input type="hidden" name="id" value="3674d50bfa">
            <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
          </div>
          <div class="form-button columns">
            <input class="button postfix" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Sign Up">
            <input class="button postfix1" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Go">
          </div>
        </div>
    </div>
  </form>
  <IFRAME style="display:none" name="hidden-form"></IFRAME>  
</div>

		<a href="#" class="big-link" data-reveal-id="myModal">
			Fade
		</a>
		

	<div id="myModal" class="reveal-modal" data-reveal=> 
		<h2>Awesome. I have it.</h2> 
		<p class="lead">Your couch. It is mine.</p> 
		<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
		<a class="close-reveal-modal">&#215;</a> 
	</div>
			
	</body>
</html>

CSS

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is &#215;
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/

JavaScript

/* FOR jQuery WITH THE BUTTON I THINK IT IS EITHER THIS ------------ */


$("#modalLauncher").click(function (e) {
    $('#myModal').foundation('reveal', 'open');
});


/* OR THIS ---------------*/

$('a.reveal-modal').trigger('onsubmit');

/* This is the function code under this line */
(function($) {

/*---------------------------
 Defaults for Reveal
----------------------------*/
	 
/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/

	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		$('#'+modalLocation).reveal($(this).data());
	});

/*---------------------------
 Extend and Execute
----------------------------*/

    $.fn.reveal = function(options) {
        
        
        var defaults = {  
	    	animation: 'fadeAndPop', //fade, fadeAndPop, none
		    animationspeed: 300, //how fast animtions are
		    closeonbackgroundclick: true, //if you click background will modal close?
		    dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
    	}; 
    	
        //Extend dem' options
        var options = $.extend({}, defaults, options); 
	
        return this.each(function() {
        
/*---------------------------
 Global Variables
----------------------------*/
        	var modal = $(this),
        		topMeasure  = parseInt(modal.css('top')),
				topOffset = modal.height() + topMeasure,
          		locked = false,
				modalBG = $('.reveal-modal-bg');

/*---------------------------
 Create Modal BG
----------------------------*/
			if(modalBG.length == 0) {
				modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
			}		    
     
/*---------------------------
 Open & Close Animations
----------------------------*/
			//Entrance Animations
			modal.bind('reveal:open', function () {
			  modalBG.unbind('click.modalEvent');
				$('.' +...