JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<section id="model1">
    <h1>model 1</h1>
    <p>name 1: <input data-bind="value: name, valueUpdate: 'afterkeydown'"/></p><p>name 1:<strong data-bind="text: name"></strong></p>
</section>
<section id="model2">
    <h1>model 2</h1>
    <p>name 2: <input data-bind="value: name, valueUpdate: 'afterkeydown'"/></p><p>name 2:<strong data-bind="text: name"></strong></p>
</section>
<section id="model3">
    <h1>model 3</h1>
    <p>name 3: <input data-bind="value: name, valueUpdate: 'afterkeydown'"/></p><p>name 3:<strong data-bind="text: name"></strong></p>
</section>

JavaScript

function viewModel1() {
    var self = this;
    self.name = ko.observable();            
};
function viewModel2() {
    var self = this;
    self.name = ko.observable();    
};
function viewModel3() {
    var self = this;
    self.name = ko.observable();    
};

ko.applyBindings(new viewModel1, document.getElementById('model1'));
ko.applyBindings(new viewModel2, document.getElementById('model2'));
ko.applyBindings(new viewModel3, document.getElementById('model3'));