JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<!-- Form Begins Here-->
<form action="" id="contact-form" class="form-horizontal">
    <form action="" id="registration-form">
        <!-- USER INFO -->
        <div class="col-md-2 no-padding-left">
            <p>User info</p>
        </div>
        <!--end of left wrap-->
        <div class="col-md-10 no-padding-left">
            <div class="row">
                <div class="col-md-4">
                    <img src="images/profile-head.png">
                </div>
                <div class="col-md-8">
                    <br>
                    <button type="button" class="btn btn-default">Browse</button>
                    <div class="line-break"></div>
                    <div class="col-md-6">
                        <img src="images/facebook-icon.png">Import from Facebook</img>
                    </div>
                    <div class="col-md-6">
                        <img src="images/twitter-icon.png">Import from Twitter</img>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-6">
                        <div class="input-group fill-column-width">
                            <label>First Name</label>
                            <br>
                            <input type="text" name="firstname" class="form-control" data-validation="alphanumeric" placeholder="">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group fill-column-width">
                            <label>Last name</label>
                    ...

JavaScript

$.validate({
    form: "#contact-form, registration-form",
    modules: 'location, date, security, file',
    onModulesLoaded: function () {
        $('#country').suggestCountry();
        var optionalConfig = {
            fontSize: '12pt',
            padding: '4px',
            bad: 'Very bad',
            weak: 'Weak',
            good: 'Good',
            strong: 'Strong'
        };

        $('input[name="pass_confirmation"]').displayPasswordStrength(optionalConfig);
    },
    onError: function () {
        alert("You've missed something");
    },
    onSuccess: function () {
        alert("All clear!");
        return false;
    }
});

$('input')
    .on('beforeValidation', function () {
    console.log('About to validate input "' + this.name + '"');
})
    .on('validation', function (evt, isValid) {
    var validationResult = '';
    if (isValid === null) {
        validationResult = 'not validated';
    } else if (isValid) {
        validationResult = 'VALID';
    } else {
        validationResult = 'INVALID';
    }
    console.log('Input ' + this.name + ' is ' + validationResult);
});

// Restrict presentation length
$('#presentation').restrictLength($('#pres-max-length'));