JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form-div">
    <form>
        <input type="text" length="20" name='pwd' onkeyup='CheckPasswordStrength(this.value);' value="Hell0Maate">
        <div id='pwd_strength'>Password strength: </div>
    </form>
</div>

CSS

#form-div{
    width: 300px;
    height: 100px;
    padding: 25px;
    margin: 100px auto 0;
    border: 1px solid #CCC;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input{
    margin-bottom: 5px;
}

JavaScript

var pass_strength;
function IsEnoughLength(str,length){
    if ((str == null) || isNaN(length))
        return false;
    else if (str.length < length)
        return false;
    return true;
}
function HasMixedCase(passwd){
    if(passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))
        return true;
    else
        return false;
}
function HasNumeral(passwd){
    if(passwd.match(/[0-9]/))
        return true;
    else
        return false;
}
function HasSpecialChars(passwd){
    if(passwd.match(/.[!,@,#,$,%,^,&,*,?,_,~]/))
        return true;
    else
        return false;
}
function CheckPasswordStrength(pwd)
{
    if (IsEnoughLength(pwd,14) && HasMixedCase(pwd) && HasNumeral(pwd) && HasSpecialChars(pwd))
        pass_strength = "<b><font style='color:olive'>Very strong</font></b>";
    else if (IsEnoughLength(pwd,10) && HasMixedCase(pwd) && HasNumeral(pwd) && HasSpecialChars(pwd))
        pass_strength = "<b><font style='color:Blue'>Strong</font></b>";
    else if (IsEnoughLength(pwd,10) && HasMixedCase(pwd) && HasNumeral(pwd))
        pass_strength = "<b><font style='color:Green'>Medium</font></b>";
    else
        pass_strength = "<b><font style='color:red'>Weak</font></b>";
    document.getElementById('pwd_strength').innerHTML = "Password strength: " + pass_strength;
}