JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form method="get" action="/echo/json/" id="signup-form">
       <fieldset class="uber-form">
           <p><label>First Name:</label><input name="firstname" id="firstname" /></p>
           <p><label>Last Name:</label><input name="lastname" id="lastname" /></p>
           <p><label>Username:</label><input name="username" id="username" /></p>
           <p><label>Password:</label><a href="#" class="tooltip">?</a><input type="password" name="password" id="password" /></p>  
           <button>Sign Up</button>      
    </fieldset>
</form>

CSS

html,body{font:normal 14px Arial, Helvetica, San-serif;color:#555;}

fieldset.uber-form{
    border:2px solid #555;
    box-shadow:2px 2px 5px #222;
    border-radius:10px;
    width:280px;
    padding:10px 30px 20px 30px;
background: #bfbfbf; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #ffffff 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(30%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cccccc 0%,#ffffff 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cccccc 0%,#ffffff 30%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cccccc 0%,#ffffff 30%); /* IE10+ */
background: linear-gradient(to bottom,  #cccccc 0%,#ffffff 30%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.uber-form p{clear:both;position:relative;}
.uber-form label{width:90px;display:inline-block;font-weight:bold;text-align:right;margin:5px 10px 0 0;}

.uber-form label.error{position:absolute;left:100%;top:-15px;padding:15px;background-color:red;color:#fff;font:normal 11px Arial, Helvetica, San-serif;text-align:left;max-width:150px;width:auto;
background: #cc0000;box-shadow:1px 1px 3px #222;display:block; white-space: nowrap;

}
.uber-form label.error:before{
    content:"";width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #cc0000 transparent transparent;
    position:absolute;left:-10px;
}
.uber-form input{border:1px solid #888;box-shadow:inset 1px 1px 3px #ccc;border-radius:4px;padding:4px;margin-right:10px;float:right;}
.uber-form button{float:right;clear:both;border-radius:6px;border:1px solid #333;background-color:green;padding:5px 10px;color:#fff;font-weight:bold;margin-right:10px;}
.uber-form .tooltip{float:right;margin-right:-10px;}

JavaScript

$(function(){
        var signupForm = $("#signup-form");
        signupForm.find('input').first().focus();
        
// validate signup form on keyup and submit
		signupForm.validate({
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				},
				password: {
					required: true,
					minlength: 5
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				}
			}
		});

});