JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

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-error {
    border: 6px solid red;
}
.has-success {
    border: 3px solid green
}

JavaScript

$(function() {
     $('input').on('input',function() {
        var pass = $('input[name=password]'),
            reps = $('input[name=repassword]'),
            pass_cont = $('#password'),
            reps_cont = $('#repassword');
         !$(this).is( '[name=password]' ) || $(function() {
             pass_cont.addClass( pass.val().length === 0 ? 'has-error' : 'has-success' )
             .removeClass( pass.val().length === 0 ? 'has-success' : 'has-error' );
         })();
         !$(this).is( '[name=repassword]' ) || $(function() {
             reps_cont.addClass( reps.val() === pass.val() ? 'has-success' : 'has-error' )
             .removeClass( reps.val() === pass.val() ? 'has-error' : 'has-success' );
         })();
    });
});