JSFiddle - React, Tailwind, and code Playground
HTML
<!-- ko template: {data: list} -->
<div class="main" data-bind="foreach: $data">
<span data-bind="html: $data"></span>
</div>
<!-- /ko -->
CSS
.main {
width: 100%;
font-size: 3px;
}
JavaScript
// base items
var baseItems = [], numItems = 2000;
for (var i = 0; i < numItems; i++) { baseItems.push(i); }
// view model
var vm = { list: ko.observableArray(baseItems) }
ko.applyBindings(vm);
// add one item
console.time("Pushing item with " + numItems + " members");
vm.list.push(i);
console.timeEnd("Pushing item with " + numItems + " members");
console.log('---------');