JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<body>
    <div id="example" class="k-content absConf">
        <div class="diagram-wrapper" style="margin: auto;">
            <div id="diagram"></div>
        </div>
    </div>
</body>

JavaScript

//Demo kendo ui diagram
var data = [{
    firstName: "Server0",
    lastName: "SHOU",
    image: "antonio.jpg",
    title: "服务器状态良好",
    colorScheme: "#1696d3",
    items: [{
        firstName: "Server1",
        image: "elizabeth.jpg",
        lastName: "SHOU",
        title: "服务器状态良好！",
        colorScheme: "#ef6944",
        items: [{
            firstName: "Server1-1",
            lastName: "SHOU",
            image: "ann.jpg",
            title: "服务器状态良好",
            colorScheme: "#ef6944"
        }]
    }, {
        firstName: "Server2",
        lastName: "SHOU",
        image: "diego.jpg",
        title: "服务器状态良好",
        colorScheme: "#ee587b"
    }, {
        firstName: "Server3",
        lastName: "SHOU",
        image: "felipe.jpg",
        title: "服务器状态良好",
        colorScheme: "#75be16"
    }]
}];

function visualTemplate(options) {
    var dataviz = kendo.dataviz;
    var g = new dataviz.diagram.Group();
    var dataItem = options.dataItem;

    g.append(new dataviz.diagram.Rectangle({
        width: 210,
        height: 75,
        stroke: {
            width: 0
        },
        background: dataItem.colorScheme
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.firstName + " " + dataItem.lastName,
        x: 85,
        y: 20,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.title,
        x: 85,
        y: 40,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.Image({
        source: "http://demos.telerik.com/kendo-ui//content/dataviz/diagram/people/" + dataItem.image,
        x: 3,
        y: 3,
        width: 68,
        height: 68
    }));

    return g;
}

function createDiagram() {
    $("#diagram").kendoDiagram({
        dataSource: new kendo.data.HierarchicalDataSource({
            data: data,
            schema: {
                model: {
                    children: "items"
                }
            }
        }),
        layout: {
      ...