JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/nje/jquery-datalink/raw/e3e3be4312c9b224a8d9b25031f4ac876e4f70fd/jquery.js"></script>
<script src="http://github.com/nje/jquery-datalink/raw/master/jQuery.datalink.js"></script>
<form>
    <!-- First Name -->
    <label for="firstName">First Name:</label>
    <input type="text" name="firstName" id="firstName" />
    <br />
    <!-- Last Name -->    
    <label for="lastName">Last Name:</label>
    <input type="text" name="lastName" id="lastName" />   
    <br />
   <!-- Employee Id -->    
    <label for="lastName">Employe ID:</label>
    <input type="text" name="employeeId" id="employeeId" style="width: 75px;" />   
    <br />
    <!-- Email Address -->    
    <label for="emailAddress">Email Address:</label>
    <input type="text" name="emailAddress" id="emailAddress" />   
    <br />
   <!-- Phone Extension -->    
    <label for="phoneExt">Phone:</label>
    <input type="text" name="phoneExt" id="phoneExt" style="width: 120px;" />           
    <div id="dataLink">
        <label>First Name:</label>
        <span id="firstNameVal"></span>
        <label>Last Name:</label>        
        <span id="lastNameVal"></span>
        <label>Employee ID:</label>        
        <span id="employeeIdVal"></span>
        <label>Email Address:</label>        
        <span id="emailAddressVal"></span>              
        <label>Phone Ext:</label>        
        <span id="phoneExtVal"></span>                                                  
    </div> 
</form>

CSS

body, input[type='text'] {
    color: #222;
    font: normal 11px Verdana, Geneva, sans-serif;    
}
label, input {
    float: left;    
}
label {
    clear: left;
    padding: 10px 0;
    width: 95px;
}
input {
    border: solid 1px #ABADB3;
    margin-top: 6px;
    padding: 3px 0 3px 3px;    
    width: 200px;
}
input:focus {
    border-color: #7EADD9;
}
div#dataLink {
    background-color: #F7F7F7;
    border: solid 1px #DDD;
    height: 300px;
    padding: 5px;
    position: absolute;    
    right: 10px;
    top: 10px;
    width: 250px;
}
div#dataLink span {
    float: left;    
    padding: 10px 0;
}

JavaScript

$(document).ready(function() {
    $("#firstName").focus();
})

var employee = { };
$("form").link(employee);    

//Link object to fields
$("#firstNameVal").link(employee, {
    firstName: {
        name: "firstNameVal",
        convertBack: function(value, source, target) {
            $(target).text(value);
        }
    }
});    
$("#lastNameVal").link(employee, {
    lastName: {
        name: "lastNameVal",
        convertBack: function(value, source, target) {
            $(target).text(value);
        }
    }
});    
$("#employeeIdVal").link(employee, {
    employeeId: {
        name: "employeeIdVal",
        convertBack: function(value, source, target) {
            $(target).text(value);
        }
    }
});    
$("#emailAddressVal").link(employee, {
    emailAddress: {
        name: "emailAddressVal",
        convertBack: function(value, source, target) {
            $(target).text(value);
        }
    }
});    
$("#phoneExtVal").link(employee, {
    phoneExt: {
        name: "phoneExtVal",
        convertBack: function(value, source, target) {
            $(target).text(value);
        }
    }
});