JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div style="text-align:center">
    <i class="fa fa-user"></i>
</div>
<form id="form_1">
<div class="form-group">
    <input type="text" id="username_1" class="form-control" placeholder="Username">
    <input type="password" id="password_1" class="form-control" placeholder="Password">
</div>
<button id="signIn_1" type="submit" class="btn btn-block sign-in">Sign In</button>
</form>

CSS

.fa-user {
    font-size:20pt;
}

.fa-user.fail {
    color: red;
}

.fa-user.success {
    color: green;
}

JavaScript

(function($){
	$('#signIn_1').click(function () {  
	    
	    var username = "891.00";
	    var password = "89.10";

	    if ( username < password ) {
            $('.fa-user').removeClass('success').addClass('fail');	
            return false;
	    } else {
	   		$('.fa-user').removeClass('fail').addClass('success');		
	    }
			
	});
})(jQuery);