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",
        items: [{
            firstName: "Server2-1",
            lastName: "SHOU",
            image: "fran.jpg",
            title: "服务器状态良好",
            colorScheme: "#ee587b"
        }]
    }, {
        firstName: "Server3",
        lastName: "SHOU",
        image: "felipe.jpg",
        title: "服务器状态良好",
        colorScheme: "#75be16",
        items: [{
            firstName: "Server3-1",
            lastName: "SHOU",
            image: "daniel.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,
    ...