JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
<form data-bind="with: form">
<label>
First:
<input type="text" data-bind="value: firstName">
</label>
<label>
Last:
<input type="text" data-bind="value: lastName">
</label>
</form>
<div>
You are: <span data-bind="text: name"></span>
</div>
</div>
JavaScript
function ViewModel() {
this.form = {
firstName: ko.observable("Joe"),
lastName: ko.observable("Bloggs")
};
this.name = ko.computed(function () {
return this.form.firstName() + ' ' + this.form.lastName();
}, this);
};
ko.applyBindings(new ViewModel(), document.getElementById('app'));