JSFiddle - React, Tailwind, and code Playground

by barzik

HTML

<div id="contactwrapper">
  <div class="block clear">
    <div class="block-left">
      <h1>Nous contacter</h1>
      <div id="addressbox">
        <h3>CENTRE DE M</h3>
        <p>3, rufer</p>
        <p> L53embourg)</p>
        <ul id="contact">
          <li><i class="icon-phone-sign blue"></i> +352 691 123.456</li>
          <li><i class="icon-envelope blue"> </i><a href="javascript:sendAnnotatedMailTo('coact','bliau','lu','Contact via blondiau.lu','')">[email protected]</a></li>
          <li><i class="icon-map-marker blue"></i><a href="http://goo.gl/maps/Ew2" target="_blank"> Plan d'accès</a></li>
        </ul>
      </div>
      <!-- End DIV addressbox --> 
      <div class="social-like">
      <div class="fb-like" data-href="http://www.google.com" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
      </div>
    </div>
    <!-- End DIV block-left -->
    <div class="block-right">
      <h1>Formulaire de contact</h1>
      <!-- CONTACT FORM-->
      <div class="contact-form">
        <form id="contactfrm" method="post" class="clearfix">
          <div class="clearfix">
            <input id="name" name="name" placeholder="Nom" type="text" value="">
            <input id="email" name="email" placeholder="Email" type="email" value="">
          </div>
          <textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>
          <input type="submit" value="Envoyer" name="submit">
          <p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
          <p class="error" style="display:none;">E-mail non valide et/ou message vide</p>
        </form>
      </div>
      <!-- /.contact-form --> 
    </div>
    <!-- End DIV block-right --> 
  </div>

CSS

/*************************************************************
 * CONTACT
 *************************************************************/
.contact-form input[type=text] {
	float: left;
	width: 200px;
}
.contact-form input[type=email] {
	float: right;
	width: 200px;
}
.contact-form input[type=submit] {
	margin-top: 8px;
	float: right;
}
.contact-form textarea {
	float: left;
	height: 70px;
	margin-bottom: 10px;
	margin-top: 20px;
	width: 100%;
}
/*************************************************************


/*************************************************************
 * FORMS
 *************************************************************/
form label {
	cursor: pointer
}
form textarea, form input[type=text], form input[type=password], form input[type=email] {
	background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
	border-top: 1px solid transparent;
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid transparent;
	border-left: 1px solid #d2d2d2;
	color: #7c7c7c;
	font-family: 'Arial', sans-serif;
	padding: 6px 8px;
	resize: none;
}
form input:focus, form textarea:focus {
	background: #d5d5d5 none;
	border: 1px solid #2165CB;
	outline: none;
}
form input[type=submit] {
	background: #0064C4 url('../images/form-caret.png') right center no-repeat;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	font-weight: normal;
	padding: 8px 50px;
	text-transform: uppercase;
}


.success {
	display: none;
	display: block;
	margin: auto;
	width: 100%;
	overflow: hidden;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 1px;
	padding-top: 3px;
	padding-bottom: 3px;
	background: #99CB97;
}
.error {
	position: absolute;
	display: none;
	display: block;
	background: #EF6666;
	display: inline;
	padding: 3px 10px 3px 10px;
	top: 210px;
	float: left;
}

#contactwrapper {
	margin-top: 30px;
	padding-bottom: 30px;
	position: relative;
	display: block;
	margin-right:...

JavaScript

// Contact Form
$(document).ready(function() {
    $("#contactfrm").submit(function(e) {
        e.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();
        var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

        function isValidEmail(emailAddress) {
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailAddress);
        };
        if (isValidEmail(email) && (message.length > 1) && (name.length > 1)) {
            $.ajax({
                type: "POST",
                url: "sendmessage.php",
                data: dataString,
                success: function() {
                    $('input[name="submit"]').hide();
                    $('.error').hide()
                    $('.success').fadeIn(1000);
                }
            });
        } else {
            $('.error').fadeIn(1000);
        }
        return false;
    });
});