JSFiddle - React, Tailwind, and code Playground

HTML

<div id="personal-information">
    <input data-bind="value: firstName" type="text">
    <input data-bind="value: lastName" type="text">
    <input data-bind="value: middleName" type="text">
    <input data-bind="value: userName" type="text">
    <input data-bind="value: dateOfBirth" type="text">
</div>
<div id="address-information">
    <input data-bind="value: city" type="text">
    <input data-bind="value: street" type="text">
</div>
<div id="changelog">
    <ul data-bind="foreach: log">
        <li data-bind="text: $data"></li>
    </ul>
</div>

CSS

input {
    display: block;
}

JavaScript

function PersonViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Doe");
    this.middleName = ko.observable();
    this.userName = ko.observable("Johnny");
    this.dateOfBirth = ko.observable("12/12/2012");
}

function AddressViewModel() {
    this.city = ko.observable("@Model.City");
    this.street = ko.observable("@Model.Street");
}

function Logger(pvm, avm) {
	var p = ko.computed(function () {
    	return ko.toJS(pvm);
    });
	var a = ko.computed(function () {
    	return ko.toJS(avm);
    });
    var log = ko.observableArray();
    p.subscribe(function (value) {
    	log.push("Person changed");
    });
    a.subscribe(function (value) {
    	log.push("Address changed");
    });
    this.log = log;
}

var pvm = new PersonViewModel();
var avm = new AddressViewModel();
var logger = new Logger(pvm, avm);

ko.applyBindings(pvm, document.getElementById("personal-information"));
ko.applyBindings(avm, document.getElementById("address-information"));
ko.applyBindings(logger, document.getElementById("changelog"));