JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<p>Type stuff here: <input data-bind='textInput: delayedValue' class="delayedValueInput" /></p>
<p>Current delayed value: <b data-bind='text: delayedValue' class="currentDelayedValue"> </b></p>
 
<div data-bind="visible: loggedValues().length > 0" style="width:100%;">
    <h3>Stuff you have typed:</h3>
    <ul data-bind="foreach: loggedValues" class="loggedValues">
        <li data-bind="text: $data"></li>
    </ul>
</div>

CSS

.delayedValueInput
{
  width:100%;
  display:block;
}

.currentDelayedValue
{
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.loggedValues
{
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
}

*
{
  box-sizing:border-box;
}

JavaScript

function AppViewModel() {
this.delayedValue = ko.observable().extend({ rateLimit:  1000 });
    //this.instantaneousValue = ko.observable();
   // this.delayedValue = ko.pureComputed(this.instantaneousValue)
    //    .extend({ rateLimit:  1000 });
 
    // Keep a log of the throttled values
    this.loggedValues = ko.observableArray([]);
    this.delayedValue.subscribe(function (val) {
        if (val !== '')
            this.loggedValues.push(val);
    }, this);
}
 
ko.applyBindings(new AppViewModel());