JSFiddle - React, Tailwind, and code Playground

HTML

<script id="treeElement" type="text/html">
  <li data-item="Item 2" data-item-id="2">
    <div class="uk-nestable-item">
      <div class="uk-nestable-handle"></div>
      <div data-nestable-action="toggle"></div>
      <div class="list-label" data-bind="text: name"></div>
    </div>
    <ul data-bind="template: { name: 'treeElement', foreach: children }">      
    </ul>
  </li>
 </script>
 
 <ul id="nestableList-1" class="uk-nestable" data-uk-nestable data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

JavaScript

var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("Germany"),
    new TreeElement("United States", 
        [ 
            new TreeElement("Atlanta"),
            new TreeElement("New York", [ 
                new TreeElement("Harlem"),
                new TreeElement("Central Park")
            ]) 
        ]),
    new TreeElement("Canada", [
        new TreeElement("Toronto")
    ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);