JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form id="registration__form" action="" class="form" method="POST" name="form">

    <input type="password" id="field" data-indicator="pwindicator" name="password" placeholder="password" required="required">
    <div id="pwindicator">
        <div class="bar"></div>
        <div class="label"></div>
    </div>
</form>

CSS

.bar {
    height: 7px;
}

.label {
    position: relative;
}

.pw-weak .bar {
    background: #fd1d1e;
    width: 33%;
}

.pw-weak .label {
    color: #fd1d1e;
}

.pw-mediocre .bar {
    background: #feb914;
    width: 66%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.pw-mediocre .label {
    color: #feb914;
    text-align: center;
}

.pw-very-strong .bar {
    background: #34d123;
    width: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.pw-very-strong .label {
    color: #34d123;
    text-align: right;
}

JavaScript

$('#field').on("keyup", function() {
    if ($('#field').val().length > 0) {
        $('#field').pwstrength();
        $('#pwindicator').show();
    } else {
        $('#pwindicator').hide();
    }
});

$('#field').blur(function() {
    if ($('#field').val() == "") {
        $('#pwindicator').hide();
    }
});

// password strength function 
! function(t) {
    function a(a) {
        var n, e = t.pwstrength(t(this).val()),
            s = a.data;
        n = s.classes[e], s.indicator.removeClass(s.indicator.data("pwclass")), s.indicator.data("pwclass", n), s.indicator.addClass(n), s.indicator.find(s.label).html(s.texts[e])
    }
    t.pwstrength = function(t) {
        var a, n, e, s, i = 0,
            r = t.length;
        return i += 5 > r ? 0 : 8 > r ? 5 : 16 > r ? 10 : 15, n = t.match(/[a-z]/g), n && (i += 1), a = t.match(/[A-Z]/g), a && (i += 5), a && n && (i += 2), e = t.match(/\d/g), e && e.length > 1 && (i += 5), s = t.match(/\W/g), s && (i += s.length > 1 ? 15 : 10), a && n && e && s && (i += 15), t.match(/\s/) && (i += 10), 8 > i ? 0 : 16 > i ? 1 : 2
    }, t.fn.pwstrength = function(n) {
        var n = t.extend({
            label: ".label",
            classes: ["pw-weak", "pw-mediocre", "pw-very-strong"],
            texts: ["pw-weak", "pw-medium", "pw-good"]
        }, n || {});
        return n.indicator = t("#" + this.data("indicator")), this.keyup(n, a)
    }
}(jQuery);