JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<p data-bind="text: name"></p>
<ul data-bind='template: {name : "displayItems", data: item}' ></ul>

    <script id="displayItems" type='text/html'>
        <li>
            <span data-bind="text: name">
            <ul data-bind='template: {name : "displayItems", foreach: $data.children}' ></ul>
        </li>
    
    
    </script>

JavaScript

var viewModel = {
    item: { 
        name: ko.observable('Graham'), 
        children: ko.observableArray([ 
            { 
                name: ko.observable('Son of Graham'), 
                children: ko.observableArray([ 
                    { 
                        name: ko.observable('Son of Son of Graham'), 
                        children: ko.observableArray()
     
                    } 
                ] )
            } 
        ] )
    } ,
    name: ko.observable('hello world')  
};


ko.applyBindings(viewModel);