JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    </head>
    
    <body>
        <form id="myform">
            <label for="field">Required, email:</label>
            <input class="left" id="field" name="field" />
            <br/>
            <input type="submit" value="Validate!" />
        </form>
    </body>

</html>

CSS

#field {
    margin-left: .5em;
    float: left;
}
#field, label {
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
br {
    clear: both;
}
input {
    border: 1px solid black;
    margin-bottom: .5em;
}
input.error {
    border: 1px solid red;
}
label.error {
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
    padding-left: 16px;
    margin-left: .3em;
}
label.valid {
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
    display: block;
    width: 16px;
    height: 16px;
}

JavaScript

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});

$(document).ready(function () {
    $("#myform").validate({
        rules: {
            field: {
                required: true,
                email: true
            }
        }
    });
});