JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" class="user-data">
        <div class="fields">
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" data-validation-method="email" class="text" value="" placeholder="youremail@somesite.com" />
            <span class="info">We won't do anything cheeky with your email... promise.</span>
            <label for="password">Choose a password:</label>
            <input type="password" name="password" id="password" data-validation-method="password" class="text" value="" />
            <label for="verify_password">Retype your password:</label>
            <input type="password" name="verify_password" id="verify_password" class="text" data-validation-method="verify_password" data-validation-requires="password" value="" />
            <input type="checkbox" name="mailing_list" value="true" /> <label for="mailing_list">I would like to recieve email updates about new features</label>
            <span class="info">We won't spam your inbox, emails will be infrequent.</span>
        </div>
        <input type="submit" id="submitbtn" class="button omega" name="submit" value="Create your account" />
        </form>

CSS

body {
   font-family: Verdana, sans-serif;
   font-size: 100%;
}

form.user-data  {
    background: #ECECEC;
    padding: 1em;
}

form div.fields {
    position: relative;
    padding-right: 6px;
    margin-bottom: 1.5em;
    display: inline-block;
}

form span.info {
    display: block;
    margin-bottom: 1em;
}

form.user-data label {
    margin: 0.5em 0em -0.5em 0em;
    height: 2em;
    line-height: 2em;
    text-align: left;
    padding-top: 1.5em;
    font-weight: bold;
}

form.user-data input[type=checkbox] {
    margin: 0.5em 1em 0.5em 0em;
}

form.user-data input[type=text], .user-data input[type=password] {
    border-style: inset;
    margin: 0.2em 0em 0.5em 0em;
    height: 2em;
    line-height: 2em;
    width: 100%;
    text-indent: 0.5em;
    font-size: 1.15em;
    display: block;
    border: 3px solid #B4B4B4;
    border-radius: 5px 5px 5px 5px;
    color: #202D32;
    position: relative;
    z-index: 2;
}

form.user-data input[type=text].win, .user-data input[type=password].win {
    border-color: #7ba400;
    background-image: url(http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/correct.gif);
    background-position: right center;
    background-repeat: no-repeat;
}

form.user-data input[type=text].fail, .user-data input[type=password].fail {
    border-color: #DD4B39;
    background-image: url(http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/error.gif);
    background-position: right center;
    background-repeat: no-repeat;
}

form.user-data input[type=text].loading, .user-data input[type=password].loading {
    background-image: url(http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/loading.gif);
    background-position: right center;
    background-repeat: no-repeat;
}

form.user-data input[type=text]:focus, .user-data input[type=password]:focus {
    border: 3px solid #000;
    outline: none;
    -moz-box-shadow: 0 1px 2px #AAAAAA inset;
 ...

JavaScript

jQuery(document).ready(function($) {
                                
    var inputs = $('input[data-validation-method]');
    var fields = $();
    var classes = ['fail', 'win'];
    
    //Methods of validation, must return an object like so {result: [boolean], message: [string or false]} as a parameter of the callback() function;
    var methods = {
        
        'email' : function(field, dependancies, callback) {
            var value = field.val();
            var response = false;
            field.addClass("loading");
            $.post(
               ajaxData.url, 
               {
                  'action':'validate_form',
                  'value': value,
                  'method': field.data('method')
               }, 
               function(response){
                   return callback(response);
               }
            ).complete(function() {
                field.removeClass("loading");
            });
        },
        
        'password' : function(field, dependancies, callback) {
            var value = field.val();
            var response = {};
            if (value.length < 8) {
                response.result = false;
                response.message = 'Your password must be a minimum of 8 characters';
            } else {
                response.result = true;
                response.message = false;
            }
            return callback(response);
        },
        
        'verify_password' : function(field, dependancies, callback) {
            var value = field.val();
            var response = {};
            if (value != dependancies["password"].val()) {
                if (!dependancies["password"].val() || !value) {
                    return false;
                }
                response.result = false;
                response.message = 'Passwords do no match';
            } else {
                response.result = true;
                response.message = false;
            }
            return...