JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="theform" action="#">
	<table>
		<thead>
			<tr>
				<th>First Name*</th>
				<th>Last Name* </th>
				<th>Email*</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
            <tr>
                <td><input type="text" placeholder="First Name" /></td>
                <td><input type="text" placeholder="Surname" /></td>
                <td><input type="text" class="email" placeholder="Email" /></td>
                <td><input type="text" placeholder="Phone" /></td>
            </tr>
		</tbody>
	</table>
</form>

CSS

input.form-hint {
	color: gray;
	font-style: italic;
}

input.error {
	color: red;
	border: 3px solid red;
}

JavaScript

$("#theform").on('blur', 'input', null, function(event) {
		if (!$.trim($(this).val())) { //empty string
			$(this).addClass("form-hint").val($(this).attr('data-hint'));
		}
	});

	$("#theform").on('focus', 'input', null, function(event) {
		if ($(this).hasClass("form-hint")) { //displaying the hint
			$(this).removeClass("form-hint").val('');
		}
	});

//get it started
$("#theform input").blur();

$("#theform").validate();