JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label>Zip Code : </label>
        <input type="text" name="zip" />
        <span class="loading">loading..</span>
    </li>
    <li>
        <label>City: </label>
        <input type="text" name="city" />
    </li>
    <li>
        <label>State : </label>
        <input type="text" name="state" />
    </li>
</ul>

CSS

ul{
    padding: 10px;        
    list-style: none;
}

li{
    height: 30px;        
}

label{
    width: 80px;
    float: left;
    text-align: right;
    padding-right: 10px;
}

input{
    float: left;
}

span.loading{
    float: left;
    font-size: 11px;
    padding-left: 10px;
    color: #666;
    display: none;
}

JavaScript

$loader = $('span.loading');

$("input[name='zip']").bind('change keyup', function(){

    var zipcode = $(this).val();
    var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(zipcode);
    var webservice = "http://www.webservicex.net/uszip.asmx/GetInfoByZIP";
    if(isValidZip){
        $loader.show();
        $.ajax({
            url: 'proxy.php?url=' + webservice + '?USZip=' + zipcode,
            datatype: 'xml',
            success: function(data){
            		console.log(data);
                $loader.hide();

                if($(data).find('CITY').length){
                    $("input[name='city']").val($(data).find('CITY').text());
                    $("input[name='state']").val($(data).find('STATE').text());
                }
            }                
        });            
    }

});