JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="none" name="aform" target="_top"><input type="hidden" name="action" value="reg2">
<input type="hidden" name="regcode" value="">
<center><table width="350">
<tr><td width="90" class="main-body-text">Email:</td>
  <td width="248"><input type="text" name="_email"></td></tr>
<tr>
  <td class="">Username:</td>
  <td><input type="text" name="_login"></td></tr>
<tr>
  <td class="main-body-text">Password:</td>
  <td><input type="password" name="_password"></td></tr>
<tr>
  <td class="main-body-text">Verify password:  </td>
  <td><input type="password" name="_password2"></td></tr>
<tr><td class="main-body-text">Name:</td>
  <td><input type="textbox" name="_Name"></td></tr>
<tr><td class="main-body-text">Job title:</td>
  <td><input type="textbox" name="_Job title"></td></tr>
<tr><td class="main-body-text">Company name:</td>
  <td><input type="textbox" name="_Company name"></td></tr>
<tr><td class="main-body-text">Country:</td>
  <td><input type="textbox" name="_Country"></td></tr>
<tr><td></td>
  <td><input type="submit" value="Send"></td></tr>
</table></center>
</form>

CSS

/*Login Code*/
form{
	margin-top:30px;}
	.error { font-family: verdana,arial; color: red; font-size: 1.00em; }



input[type=submit] {
	cursor:pointer;
	-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
	padding: 3px 12px;
	color: #000000;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#b3b3b3);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		to(#b3b3b3));
	border: 1px solid #c9c9c9;
	-moz-box-shadow:
		0px 1px 3px rgba(115,115,115,0),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(115,115,115,0),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(115,115,115,0),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0),
		0px 1px 0px rgba(255,255,255,0);
}
	input[type=submit]:hover {
	color: #000000;
	background: -moz-linear-gradient(
		top,
		#bab8ba 0%,
		#ffffff);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#bab8ba),
		to(#ffffff));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #c9c9c9;
	-moz-box-shadow:
		0px 1px 3px rgba(255,250,255,0.5),
		inset 0px 0px 2px rgba(143,143,143,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(255,250,255,0.5),
		inset 0px 0px 2px rgba(143,143,143,0.7);
	box-shadow:
		0px 1px 3px rgba(255,250,255,0.5),
		inset 0px 0px 2px rgba(143,143,143,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0),
		0px 1px 0px rgba(255,255,255,0);
}
/*Login Code End*/

JavaScript

$(document).ready(function(){$("input[type=text]").focus(function () {
    $(this).animate({ width: "160px" }, 100); 
});$(this).focusout(function () {
    $("input[type=text]").animate({ width: "130px" }, 100); 
});$("input[type=textbox]").focus(function () {
    $(this).animate({ width: "160px" }, 100); 
});$(this).focusout(function () {
    $("input[type=textbox]").animate({ width: "130px" }, 100); 
});$("input[type=password]").focus(function () {
    $(this).animate({ width: "160px" }, 100); 
});$(this).focusout(function () {
    $("input[type=password]").animate({ width: "130px" }, 100); 
});});