JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<h3>Products</h3>

<ul>
    <li><strong>Here is a static header item</strong></li>
    <!-- ko foreach: products -->
    <li>
        <em data-bind="text: name"></em>
        <!-- ko if: manufacturer -->        
            &mdash; made by <span data-bind="text: manufacturer.company"></span>
        <!-- /ko -->
    </li>
    <!-- /ko -->
</ul>

JavaScript

var viewmodel = function appViewModel() {
  var self = this;
    self.top20events = ko.observableArray([]);
    this.products = ko.observableArray([
        { name: "XBox", manufacturer: { company: "Microsoft" } },
        { name: "PlayStation", manufacturer: { company: "Sony" }  },
        { name: "Banana", manufacturer: null },
        { name: "Wii", manufacturer: { company: "Nintendo" }  }
    ]);
};
window.vm = new viewmodel();
ko.applyBindings(vm);