JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div class="box person-info">
    <span>Description</span>
    <p data-bind="text:fullName"></p>    
</div>        
<div class="box person-update">
    <input data-bind="value:firstName"/>
    <input data-bind="value:lastName"/>        
    <input data-bind="value:age"/>
</div>
<p class="updated" data-bind="visible:lastUpdated().length>0">
    Updated:
    <span data-bind="text:lastUpdated"></span>
</p>

CSS

.box{
    background-color:#EDF0FF;
    padding:10px; 
    margin-bottom:20px;
    width: 240px;
}
.box input{
   display:block;   
}
.updated{
 font-size:.5em;   
}

JavaScript

var model = {
    firstName: 'Josh',
    lastName: 'Bolling',
    age:30
};
var viewModel = ko.mapping.fromJS(model); 
viewModel.fullName = ko.computed(function(){
   return viewModel.firstName() + ', ' + viewModel.lastName() + ' (' + viewModel.age() + ' yrs old)';
});
viewModel.lastUpdated = ko.observable('');
viewModel.fullName.subscribe(function(){
    viewModel.lastUpdated(new Date().toString());
});
ko.applyBindings(viewModel);