JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form action="" method="" id="contact">
    <div class="form-group">
        <label>Your Name</label>
        <input type="text" class="form-control" placeholder="Enter Your Name" name="firstname" required="" minlength="5" />
    </div>
    <div class="form-group">
        <label>Your E-mail</label>
        <input type="email" class="form-control" placeholder="Enter Your Email" name="useremail" required="" />
    </div>
    <div class="form-group">
        <label>Contact Detail</label>
        <input type="text" class="form-control" placeholder="Enter Contact Number" name="mobile" minlength="10" maxlength="10" required="" />
    </div>
    <div class="form-group">
        <label>Type</label>
        <select class="form-control">
            <option>Inquiry</option>
            <option>Complaints</option>
            <option>Feedback</option>
            <option>Others</option>
        </select>
    </div>
    <div class="form-group">
        <label>Message</label>
        <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>

CSS

.has-error
{
    background-color: rgb(255, 0, 0);
}
.has-success
{
    background-color: rgb(0, 255, 0);
}

JavaScript

$(document).ready(function () {
    $('#contact').validate({
        rules: {
            firstname: {
                required: true,
                minlength: 5,
            },
            useremail: {
                required: true,
            }
        },
        errorClass : 'has-error',
        validClass : 'has-success',
        highlight:function(element, errorClass, validClass) {
            $(element).parent('div').addClass(errorClass).children().removeClass(errorClass);
            $(element).parent('div').removeClass(validClass).children().removeClass(validClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parent('div').removeClass(errorClass).children().removeClass(errorClass);
            $(element).parent('div').addClass(validClass).children().removeClass(validClass);
        }
    });
})