JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ko component: { name:"message-editor", params:{ text: $data.text } }-->
<!-- /ko -->
<br />
<!-- ko component:{ name:"message-editor", params:{ text: $data.text } }-->
<!-- /ko -->

JavaScript

var viewModel = function(params) {
        this.params =  params;
        this.text = params.text;
    };


ko.components.register('message-editor', {
    viewModel: viewModel,
    template: 'Message: <input data-bind="value: text" /> '
            + '(length: <span data-bind="text: text() ? text().length : 0" ></span>)'
});
 
ko.applyBindings({ text:ko.observable()});