JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
        	
        	<h1>Sign up, it's FREE!</h1>
        	
        	<form class="" method="post" action="">
        		
        		<div class="row email">
	    			<input type="text" id="email" name="email" placeholder="Email" />
        		</div>
        		
        		<div class="row pass">
        			<input type="password" id="password1" name="password1" placeholder="Password" />
        		</div>
        		
        		<div class="row pass">
        			<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
        		</div>
        		
        		<!-- The rotating arrow -->
        		<div class="arrowCap"></div>
        		<div class="arrow"></div>
        		
        		<p class="meterText">Password Meter</p>
        		
        		<input type="submit" value="Register" />
        		
        	</form>
        </div>
        
        <footer>
	        
            <a class="al3xis"> a form with password meter and pass validation </a>
        </footer>
        
        <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

CSS

/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{
	background:url('http://i34.tinypic.com/m922bk.jpg') repeat center top #826e79;
}


body{
	font:14px/1.3 'Segoe UI', 'Arial', sans-serif;
}

a, a:visited {
	outline:none;
	color:#1c4f64;
}

a:hover{
	text-decoration:none;
}

section, footer, header{
	display: block;
}


/*----------------------------
	The Header
-----------------------------*/


h1{
	font:bold 36px Cambria, "Hoefler Text",serif;
	margin-bottom:50px;
	color:#71564b;
	text-shadow:1px 1px 0 rgba(255,255,255,0.4);
}


/*----------------------------
	The Form
-----------------------------*/


#main{
	width:440px;
	margin:80px auto 120px;
	position:relative;
	text-align:center;
}

#main form{
	width:440px;
	height:450px;
	background:url('http://i33.tinypic.com/24eng8x.png') no-repeat;
	padding-top: 50px;
}

#main form .row{
	position:relative;
}

#main form .row.error:after,
#main form .row.success:after{
	content:'';
	
	position:absolute;
	right: 60px;
    top: 8px;
	width:32px;
	height:32px;
	background:url('http://i38.tinypic.com/33c4s9c.png') no-repeat;
}

#main form .row.error:after{
	background-position: 0 -79px;
}

#main form input[type=text],
#main form input[type=password]{

	border:none;
	background:url('http://i34.tinypic.com/2qm0ndc.png') no-repeat top left;
	font:14px 'Segoe UI','Arial',sans-serif;
	color:#888;
	
	outline:none;
	
    height: 48px;
    margin: 0 auto 22px;
    padding: 0 10px 0 50px;
    width: 278px;
}

#main form input[disabled]{
	opacity: 0.5;
}

#main form .email input{
	background-position:0 0;
}

#main form .email input:focus{
	background-position:0 -48px;
}

#main form .pass input{
	background-position:0 -96px;
}

#main form .pass input:focus{
	background-position:0 -144px;
}


/*----------------------------
	The Submit Button
-----------------------------*/


#main form...

JavaScript

$(function(){
	
	var pass1 = $('#password1'),
		pass2 = $('#password2'),
		email = $('#email'),
		form = $('#main form'),
		arrow = $('#main .arrow');

	// Empty the fields on load
	$('#main .row input').val('');

	// Handle form submissions
	form.on('submit',function(e){
		
		// Is everything entered correctly?
		if($('#main .row.success').length == $('#main .row').length){
			
			// Yes!
			alert("Thank you for trying out this demo!");
			e.preventDefault(); // Remove this to allow actual submission
			
		}
		else{
			
			// No. Prevent form submission
			e.preventDefault();
			
		}
	});
	
	// Validate the email field
	email.on('blur',function(){
		
		// Very simple validation
		if (!/^\S+@\S+\.\S+$/.test(email.val())){
			email.parent().addClass('error').removeClass('success');
		}
		else{
			email.parent().removeClass('error').addClass('success');
		}
		
	});

	// Use the complexify plugin on the first password field
	pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
		
		if(valid){
			pass2.removeAttr('disabled');
			
			pass1.parent()
					.removeClass('error')
					.addClass('success');
		}
		else{
			pass2.attr('disabled','true');
			
			pass1.parent()
					.removeClass('success')
					.addClass('error');
		}
		
		var calculated = (complexity/100)*268 - 134;
		var prop = 'rotate('+(calculated)+'deg)';
		
		// Rotate the arrow
		arrow.css({
			'-moz-transform':prop,
			'-webkit-transform':prop,
			'-o-transform':prop,
			'-ms-transform':prop,
			'transform':prop
		});
	});
	
	// Validate the second password field
	pass2.on('keydown input',function(){
		
		// Make sure its value equals the first's
		if(pass2.val() == pass1.val()){
			
			pass2.parent()
					.removeClass('error')
					.addClass('success');
		}
		else{
			pass2.parent()
					.removeClass('success')
					.addClass('error');
		} 
	});
	
});
//jquery complexify.js script
/*
	http://github.com/danpalmer/jquery.complexify.js

	This code is distributed under...