JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<ul data-bind="foreach: parents ">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="foreach: kids">
           <li data-bind="text: name">
           </li>
        </ul>
    </li>
</ul>

JavaScript

vm = function () {
        this.parents = [{
            name: "Piet",
            kids: [{
                name: "ted"
            }, {
                name: "fred"
            }]
        }, {
            name: "Ed",
            kids: [{
                name: "hoer"
            }, {
                name: "kut"
            }]
        }]
    }

    ko.applyBindings(vm);