JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form-contact" class="styled" action="send.php" method="post">
	           <p> Do you want religare exprt to contact you </p>
			   
			 <tr class="form-row">
                <td width="37" height="34">Email </td>
			    <td width="147"><input type="text" name="email" id="input-email" class="text-input required email default" value="" title="Enter Your Email Address"> </td>
				<td width="76">Mobile </td>
				<td width="147"><input type="text" id="input-name"  class="text-input required name default" name="name" value="" title="Enter Your mobile  number" /></td>
				</tr>
				<tr>
				<td width="35"><input class="btn-submit" type="submit" value="submit" name="submit" /></td>
				</tr>
		     </tr> 
		
		  </form>

CSS

/*Form styles*/
.styled {font-family: Arial, sans-serif;}

.styled  ol, .styled  ol li {list-style: none;}

.styled input.text-input, .styled .text-area {background: #fefefe; border-top: 1px solid #909090; border-right: 1px solid #cecece; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #bbb; padding: 3px; width: 100px; font-size: 12px;}
.styled input.text-input.default.active, .styled .text-area.default.active {color: #666666; font-style: italic;}


/* Form Validation */
.styled span.error {font-size: 11px; display: inline;}
.styled .error {!background-color: #FED2D3;
    !border: 1px solid #D3AAA8;
    color: #FF0000;
    !margin: 5px;
    !padding: 5px;
    !text-align: center; }

/* Specific Form Rules */
#form-contact {width: 360px; margin: 0 auto;}

.success {order: 1px solid; margin: 0; padding: 10px; text-align: center; color: #4F8A10; background-color: #ebf6d9; border-color: #DFF2BF;}

JavaScript

jQuery(document).ready(function($) {
	var $loading = $('<div class="loading"><img src="http://www.indianotes.com/images/religare/loader.gif" alt="" /></div>');
	$(".default").each(function(){
		var defaultVal = $(this).attr('title');
		$(this).focus(function(){
			if ($(this).val() == defaultVal){
				$(this).removeClass('active').val('');
			}
		});
		$(this).blur(function() {
			if ($(this).val() == ''){
				$(this).addClass('active').val(defaultVal);
			}
		})
		.blur().addClass('active');
	});
	$('.btn-submit').click(function(e){
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		defaulttextRemove();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var pattern = /^\d{10}$/;
		$('td',$formId).removeClass('error');
		$('span.error').remove();
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();
			if(inputVal == ''){
				$parentTag.addClass('error').append('<span class="error">Required field</span>');
			}
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('error').append('<span class="error">Enter a valid email address.</span>');
				}
			}
			if($(this).hasClass('name') == true){
				if(!pattern.test(inputVal)){
					$parentTag.addClass('error').append('<span class="error">Enter a valid mobile number.</span>');
				}
			}
		});
		if ($('span.error').length == "0") {
			$formId.append($loading.clone());
			$('fieldset',$formId).hide();
			$.post(formAction, $formId.serialize(),function(data){
				$('.loading').remove();
				$formId.append(data).fadeIn();
			});
		}
		e.preventDefault();
	});
});
function defaulttextRemove(){
	$('.default').each(function(){
		var defaultVal = $(this).attr('title');
		if ($(this).val() == defaultVal){
			$(this).val('');
		}
	});
}