JSFiddle - React, Tailwind, and code Playground

by Manish Sahu

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="col-md-6 col-lg-6">
<input type="text"  name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn"/>
</div>

CSS

.availablle {
                position:relative;
            }    
            .available:before {
                content: "&#xf00c"; 
                font-family: FontAwesome;
                left:-5px;
                position:absolute;
                top:0;
                color:green;
            }

JavaScript

$(document).on('focusout', '#mailid', function (event) {
$('#mailid').addClass('availablle');
});