JSFiddle - React, Tailwind, and code Playground

HTML

<form id="jform" action="" method="post" enctype="multipart/form-data">
                <div id="modal_content_left">
                Register
                
                <ul>
                
                    <li class="required" type="none">

                        <label>
                            
                            <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>
                            
                        </label>
                        
                        <label>
                             <br />
                            <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>
                            
                        </label>
                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>
                            
                        </label>
                        

                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
                        </label>
                    </li>

                    <>
                </ul>
                
    </div><!---end modal_content_left---></form>

CSS

input {border: 2px solid #ccc;}
.correct {border: 2px solid green;}
.error {border: 2px solid red;}

JavaScript

// JavaScript Document

$(document).ready(function(){
    jVal = {
        
            'username' : function() {

           

            var ele = $('#username');
            var pos = ele.offset();

            

            var patt = /^(?=.*[a-z].*)\w{8,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },

        

        
        'email' : function() {

            $('body').append('<div id="emailInfo" class="info"></div>');

            var ele = $('#email');
            var pos = ele.offset();

            

            var patt = /^.+@.+[.].{2,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },
        
        'password' : function(){
            
            $('body').append('<div id="passwordInfo" class="info"></div>');


            var ele = $('#password');
            var pos = ele.offset();
            
            
            if(ele.val().length < 6) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
            
        },
        
        

        

        

        
        
        
        
        
        

    };
    
    
//    $('#send').click(function (){
//        var obj = $.browser.webkit ? $('body') : $('html');
//        obj.animate({ scrollTop: $('#jform').offset().top }, 750, function...