JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://localhost:8080/jrs-jade-new-css-html/scripts/bower_components/js-sdk/themes/js_reset.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jrs-jade-new-css-html/scripts/bower_components/js-sdk/themes/default/base.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jrs-jade-new-css-html/scripts/bower_components/js-sdk/themes/default/modules.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jrs-jade-new-css-html/scripts/bower_components/js-sdk/themes/default/state.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jrs-jade-new-css-html/themes/default/lists.css">
<script src="http://localhost:8080/jrs-jade-new-css-html/scripts/bower_components/requirejs/require.js"></script>
<script type='text/javascript' src="http://localhost:8080/jrs-jade-new-css-html/scripts/require.config.js"></script>
<script>
    var __jrsConfigs__ = {
        contextPath: "http://localhost:8080/jrs-jade-new-css-html",
        userLocale: "en",
        isXdm: true
    };

    require.config({
        baseUrl: __jrsConfigs__.contextPath + "/scripts",
    });
</script>
<body class="jrs"></body>
<div id="message"></div>

CSS

/*.m-Tree-node.jrs > .j-subcontainer > .j-view-port-chunk > .m-Tree {
  margin-left: 2em;
}

.m-Tree-nodeFolder.is-closed > .wrap > .m-Tree-icon {
  background-position: -80px 0;
}*/

JavaScript

require([
    "jquery",
    "common/component/tree/Tree",
    "common/component/tree/plugin/DragAndDropPlugin"

], function ($, Tree, DragAndDropPlugin) {
    var TreeType = Tree.create();

    var tree = new TreeType({
        //dataUriTemplate: "scripts/bower_components/js-sdk/samples/scripts/Tree/data.json",
        //collapsed: true,
        rootless: true,
        selection: {
            allowed: true,
            multiple: false
        },
        predefinedData: {
            "/": [{
                _node: true,
                id: "/node1",
                value: {
                    label: "Node 1"
                }
            }, {
                _node: true,
                id: "/node2",
                value: {
                    label: "Node 2"
                }
            }, {
                _node: true,
                id: "/node3",
                value: {
                    label: "Node 3"
                }
            }, {
                _node: true,
                id: "/node4",
                value: {
                    label: "Node 4"
                }
            }],
                "/node2": [{
                _node: true,
                id: "/node2/node2a",
                value: {
                    label: "Node 2a"
                }
            }, {
                _node: true,
                id: "/node2/node2a/node2b",
                value: {
                    label: "Node 2b"
                }
            }]

        },

        processors: [{
            processItem: function (item) {
                // if item's value has 'samples' field, it should be shown as node, not leaf.
                item._node = item.value.samples && item.value.samples.length > 1;
                return item;
            }
        }],

        getDataArray: function (data, options, xhr) {
            if (options.id != "/") {
                for (var i = 0; i < data.length; i++) {
                    data[i].id === options.id && (data =...