JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<label for="login">
User name:<br />
<div class="label-info">minimum 6 chararcters: letters, numbers and symbols - _ . @</div>
<input type="text" name="login" class="input-field" value="some value">
</label>
CSS
.label-info {
display: none;
}
JavaScript
$(".input-field").focus(function() {
$(this).addClass("input-field-focus");
$(this).siblings(".label-info").show();
return false;
});
$(".input-field").blur(function() {
$(this).removeClass("input-field-focus");
$(this).siblings(".label-info").hide();
return false;
});