JSFiddle - React, Tailwind, and code Playground

HTML

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

<h1><span data-bind="text: p1.frac"></span> = <span data-bind="text: p1"></span></h1>

JavaScript

function Percentage(frac) {
    this.frac = ko.observable(frac);
    this.value = ko.computed({
        read: function() {
            return this.frac() * 100;
        },
        write: function(value) {
            this.frac(value/100);
        },
        owner: this
    });
}

Percentage.prototype.toString = function() {
    return this.value() + '%';
}

var model = {
    p1: new Percentage(0.5)
}

ko.applyBindings(model)