JSFiddle - React, Tailwind, and code Playground

HTML

<label>First Name: </label>
<input type="text" 
    data-bind="value: firstName, valueUpdate: 'afterkeydown'"/>

<br>
    
<label>Last Name: </label>
<input type="text" 
    data-bind="value: lastName, valueUpdate: 'afterkeydown'"/>

<br><br>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>

CSS

body {
    font-size: 1.5em;
    padding: 10px;
    color: #343;
}

* {
    margin: 4px;
}

input {
    padding: 4px;
    font-size: 0.8em;
}

label {
    width: 6em;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
}

p {
    margin-bottom: 14px;
}

strong, input {
    color: #56a;
}

JavaScript

function AppViewModel() {
    var self = this;
    self.firstName = ko.observable("Bert");
    self.lastName = ko.observable("Bertington");
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}

rootVM = new AppViewModel();
// Activates knockout.js
ko.applyBindings(rootVM);