JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
 <div id="divColours"></div>

JavaScript

var div = $("#divColours");
div.kendoTreeView({
  dataTextField: "label",
  // the treeview requires the use of a HierarchicalDataSource
  dataSource: new kendo.data.HierarchicalDataSource({
    type: "json",
    serverFiltering: false,
    transport: {
        read: function (options) {
          $.ajax({
            url: "/echo/json/", 
            dataType: "json",
            success: function (payLoad) {
                var test = [
                  { "label": "Zwart", "value": 4, "haschildren": true },
                  { "label": "Wit", "value": 1, "haschildren": true },
                  { "label": "Grijs", "value": 7, "haschildren": true },
                  { "label": "Bruin", "value": 8, "haschildren": true },
                  { "label": "Beige", "value": 9, "haschildren": true },
                  { "label": "Rood", "value": 10, "haschildren": true },
                  { "label": "Geel", "value": 11, "haschildren": true },
                  { "label": "Groen", "value": 12, "haschildren": true },
                  { "label": "Blauw", "value": 13, "haschildren": true }, 
                  { "label": "Overige kleuren", "value": 14, "haschildren": true}
                ];
                options.success(test);
            },
            error: function (jqXHR, textStatus, errorThrown) {              
            },
            complete: function () {
            }
          })
        } //read
    },
    schema: {
      model: {
        id: "value",
        hasChildren: "haschildren"
      }
    } //transport
  }) //datasource
});