JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/23fb458cac7f85ce075f37b969f083f355969cfa/build/output/knockout.mapping-latest.js"></script>
<script type="text/html" id="nestedTemplate">
  <div class="name" data-bind="text: Text"></div>
  <div class="container" data-bind="
    template: {
      name: 'nestedTemplate', 
      foreach: Children
    }
  "></div>
</script>


<div class="container" data-bind="
  template: {
    name: 'nestedTemplate', 
    foreach: master
  }
"></div>

CSS

div.container div.container {
  margin-left: 10px;
}

JavaScript

var ListModel = function(jsonData) {
    var self = this;

    self.master = ko.mapping.fromJS(jsonData);
}

var jsonData = [
    {
    "Text": "Hi",
    "Children": [
        {
        "Text": "Hello",
        "Children": [
            {
            "Text": "Bye",
    "Children": []
            }
        ]}
    ]}
];
var listModel = new ListModel(jsonData);
ko.applyBindings(listModel);