JSFiddle - React, Tailwind, and code Playground

HTML

<script id="formElementNodeTemplate" type="text/html">
<ul>
    <li>Parent <span data-bind="text: text"></span> <span data-bind="text: value"></span>
        <br/>
      Children:
        <!-- ko template: { name: 'formElementNodeTemplate', foreach: children } -->
        <!-- /ko -->        
     </li>
   </ul>
</script>    

 <div data-bind="template: { name: 'formElementNodeTemplate', data: $data }"></div>

JavaScript

var FormElementNode = function(children, text, value) {
   var self = this;
   self.children = ko.observableArray(children);
   self.text = ko.observable(text);
   self.value = ko.observable(value);
}



var viewModel = new FormElementNode(
    [
        new FormElementNode([], 'Child1', 'Value1'), 
        new FormElementNode([new FormElementNode([],'Child2.1','Value2.1')], 'Child2', 'Value2'),
        new FormElementNode([], 'Child3', 'Value3'),
    ], 'Main', 'MainValue');
                                                   
ko.applyBindings(viewModel);