JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
    <div id="contactFormContainer">
        <div id="contactForm">
        	<div class="loader"></div>
			<div class="bar"></div>
            <form action="mail.php" class="contactForm" name="cform" method="post">
                    
                <p>Kérjük adja meg előrhetőségeit, hogy kollégánk mihamarabb felvehesse Önnel a kapcsolatot.</p>
                <div class="input_boxes">
                    <p><label for="name">Név:</label><span class="name-missing">Kérjük adja meg a nevét!</span><br />
                    <input id="name" type="text" value="" name="name" /></p>
                    <p><label for="e-mail">E-mail cím:</label><span class="email-missing">Kérjük valós címed adjon meg!</span><br />
                    <input id="e-mail" type="text" value="" name="email" /></p>
                    <p><label for="phone">Telefonszám:</label><span class="phone-missing">Kérjük adja meg a telefonszámát!</span><br />
                    <input id="phone" type="text" value="" name="phone" /></p>
                    <p><label for="message">Megjegyzés:</label><span class="message-missing">Bármi egyéb megjegyzés</span><br />
                    <textarea id="message" rows="" cols="" name="message"></textarea></p>
                 </div>
                 <input class="submit" type="submit" name="submit" value="Küldés" onfocus="this.blur()"  />
            </form>
      </div>
       <div class="contact"></div>   
  </div>

    <div id="dummycontent">

    <a href="#contactFormContainer" class="contact bottomlink"><strong>Contact Me</strong></a>
    </div>
    
</div>
<div id="backgroundPopup"></div>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>

CSS

body {background:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:20px; color:#545353;}

.container {
	width:960;
	margin:0px auto; 
	position:relative;
	z-index:12;
	}
	
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:fixed;
	left:0px;
	top:10%;
	z-index:1;
	}
	
/* Hides the whole contact form until needed */	
#contactForm {
	height:370px;width:264px;
	background:#515151; 
	border:1px solid #929191;
	padding:7px 12px; 
	color:#fff;
	display:none;
	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}
	
/* Hides the confirmation message until needed */	
#messageSent {display:none;}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:9px; 
	line-height:10px; 
	padding-left:6px; 
	color:#f5c478;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:211px; width:47px;
	background:url(http://kepfeltoltes.hu/130307/contact_me_www.kepfeltoltes.hu_.png); 
	position:relative;
	cursor:pointer;

	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0;
	background:#000; 
	z-index:11;
	}  
	
/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
#contactForm textarea, #contactForm input {
	width:240px; 
	background:#6d6d6d url(../images/contact_input.png) repeat-x top; 
	color:#fff; 
	border:1px solid #8a8a8a; 
	height:15px; 
	line-height:14px; 
	font-size:11px; 
	padding:2px 2px...

JavaScript

$(document).ready(function(){
	//function for contact form dropdown
	function contact() {
		if ($("#contactForm").is(":hidden")){
			$("#contactForm").animate({width: 'toggle'});
//			$("#backgroundPopup").css({"opacity": "0.7"});
//			$("#backgroundPopup").toggle("slow"); 
		}
		else{
			$("#contactForm").animate({width: 'toggle'});
//			$("#backgroundPopup").toggle("slow");  
		}
	}
	 
	//run contact form when any contact link is clicked
	$(".contact").click(function(){contact()});
	
	//animation for same page links #
	$('a[href*=#]').each(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
		&& location.hostname == this.hostname
		&& this.hash.replace(/#/,'') ) {
		  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
		  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			if ($(this.hash).length) {
				$(this).click(function(event) {
					var targetOffset = $(this.hash).offset().top;
					var target = this.hash;
					event.preventDefault();			   
					$('html, body').animate({scrollTop: targetOffset}, 500);
					return false;
				});
			}
		}
	});



   //submission scripts
  $('.contactForm').submit( function(){
		//statements to validate the form	
		var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		var email = document.getElementById('e-mail');
		if (!filter.test(email.value)) {
			$('.email-missing').show();
		} else {$('.email-missing').hide();}
		if (document.cform.name.value == "") {
			$('.name-missing').show();
		} else {$('.name-missing').hide();}	
		if (document.cform.message.value == "") {
			$('.message-missing').show();
		} else {$('.message-missing').hide();}		
		if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
			return false;
		} 
		
		if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value !=...