JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<ul>
                                <li>
                                    <label for="checkpass">Choose a Password: <span class="redStar">*</span></label>
                                    <input type="password" class="required smallInputBox" id="checkpass" name="checkpass" data-msg-required="Enter a password">
                                </li>
                                <li>
                                    <div id="passMeter">
                                        <div class="passwordStrength" id="passwordWeek" style="background-color: rgb(153, 0, 0);"></div><div class="passwordStrength" id="passwordMedium" style="background-color: rgb(255, 204, 51);"></div><div class="passwordStrength" id="passwordStrong" style="background-color: rgb(204, 204, 204);"></div>
                                    </div>
                                </li>
                                <li>
                                    <label for="checkpass2">Re-enter Password: <span class="redStar">*</span></label>
                                    <input type="password" class="required smallInputBox" id="checkpass2" name="checkpass2" data-msg-required="Passwords entered do not match. Please try again.">
                                </li>
                            </ul>

CSS

<style type="text/css">
#passwordStrength {
    display: block;
    float: left;
    height: 10px;
    width:300px;
}
.strength0
{
  width:100%;
  background:#cccccc;
}

.strength1
{
  width:20%;
  background:#ff0000;
}

.strength2
{
  width:40%;  
  background:#ff5f5f;
}

.strength3
{
  width:60%;
  background:#56e500;
}

.strength4
{
  background:#4dcd00;
  width:80%;
}

.strength5
{
  background:#399800;
  width:100%;
}

#strengthMeter{
  margin-top:10px;
  padding:0px;
}

#passMeter {
    height: 10px;
    margin-top: 5px;
    width: 140px;
}

.passwordStrength{

    background: none repeat scroll 0 0 grey;
    border: 1px solid gray;
    float: left;
    height: 100%;
    width: 30%;
}

JavaScript

//$(document).ready(function(){ $('#checkpass').pstrength(); });

(function($){
	$.extend($.fn, {
		pstrength : function(options) {
			var options = $.extend({
				verdicts:	["Very              Weak","Weak","Medium","Strong","Very Strong"],
				colors: 	["#f00","#c06", "#f60","#3c0","#3f0"],
				scores: 	[10,15,30,40],
				minchar:	8,
				tooShort:   "Too Short!",
				minCharText: "Minimum length is %d characters"
			},options);
			return this.each(function(){
				var infoarea = $(this).attr('id');
				if(options.minchar>0)
				/*$(this).after('<div class="pstrength-minchar" id="' + infoarea + '_minchar">' + options.minCharText.replace('%d', options.minchar) + '</div>');*/
				/*$(this).after('<div class="pstrength-info" id="' + infoarea + '_text"></div>');
				$(this).after('<div><div class="pstrength-bar" id="' + infoarea + '_bar" style="border: 1px solid white; font-size: 1px; height: 5px; width: 0px;"></div></div>');*/
				$(this).keyup(function(){
					$.fn.runPassword($(this).val(), infoarea, options);
				});
			});
		},
		runPassword : function (password, infoarea, options){
			// Check password
			nPerc = $.fn.checkPassword(password, options);
			// Get controls
	    	var ctlBar = "#" + infoarea + "_bar";
	    	var ctlText = "#" + infoarea + "_text";
			// Color and text
			if (nPerc < 0) {
				strColor = '#ccc';
				strText = options.tooShort;
				$(ctlBar).css({width: "5%"});
				$(".passwordStrength").css("backgroundColor", strColor);
                 //alert("password is very week");  
			}
			else if(nPerc <= options.scores[0])
			{
		   		strColor = options.colors[0];
				strText = options.verdicts[0];
				$(ctlBar).css({width: "10%"});
				$("#passwordWeek").css("backgroundColor", "#900");
				$("#passwordMedium").css("backgroundColor", "#ccc");
				$("#passwordStrong").css("backgroundColor", "#ccc");
                 //alert("password is week");  
			}
			else if (nPerc > options.scores[0] && nPerc <= options.scores[1])
			{
		   		strColor =...