JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div>
    <strong>First Name:</strong>
    <span data-bind="text: firstName"></span>
    
    <strong>Last Name:</strong>
    <span data-bind="text: lastName"></span>
    
    <strong>Full Name:</strong>
    <span data-bind="text: fullName"></span>
</div>

CSS

strong + span{ display: block; margin: 15px; }

JavaScript

var viewModel = (function () {
    this.firstName = ko.observable('John');
    this.lastName = ko.observable('Doe');
    this.fullName = ko.computed(function(){
        return this.firstName() + ' ' + this.lastName();
    }, this);
})();

ko.applyBindings(viewModel);