JSFiddle - React, Tailwind, and code Playground

HTML

<input data-bind="value: p1.percentage, valueUpdate: 'afterkeydown'"></input>%
= <span data-bind="text: p1"></span>

CSS

input {
    width: 4em;
    text-align: right;
}

JavaScript

ko.extenders.percentage = function(target, option) {
    target.percentage = ko.computed({
        read: function() {
            return this() * 100;
        },
        write: function(value) {
            this(value/100);
        },
        owner: target
    });
    return target;
};

var model = {
    p1: ko.observable(0.5).extend({'percentage': true})
}

ko.applyBindings(model)