JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
 <table id="grid1" data-role="grid" data-bind="source: ds" >
    <thead >
        <tr >
            <th data-field="a" data-title="Short Name" >Short Name</th>
            <th data-field="b">Site</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
 </table> 
<br/>
<table id="grid2" data-role="grid" data-bind="source: ds" >
    <thead >
        <tr >
            <th data-field="a" data-title="Short Name" >Short Name</th>
            <th data-field="b">Site</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
 </table>

JavaScript

d = new kendo.data.DataSource({
    data: [{
        a: "a1",
        b: "b1"},
    {
        a: "a2",
        b: "b2"}],
    schema: {
        model: {
            fields: {
                a: {
                    name: "a"
                },
                b: {
                    name: "b"
                }
            }
        }
    }
});
vm = kendo.observable({
    ds: d
});

$("#grid1").kendoGrid({
    dataSource: d
});

kendo.bind($("#grid2"), vm);