JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group" id="password">
    <input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="form-group" id="repassword">
    <input type="password" class="form-control" placeholder="Confirm Password" name="repassword">
</div>

CSS

.has-success {background: green}
.has-error {background: red}

JavaScript

$('input[name=password], input[name=repassword]').on('change', function () {
    var password   = $('input[name=password]'),
        repassword = $('input[name=repassword]'),
        both       = password.add(repassword).removeClass('has-success has-error');
    
    password.addClass(
        password.val().length > 0 ? 'has-success' : 'has-error' 
    );
    repassword.addClass(
        password.val().length > 0 ? 'has-success' : 'has-error'
    );
    
    if (password.val() != repassword.val()) {
        both.addClass('has-error');
    }
});