JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css">
<!DOCTYPE html>
<html>
    
    <head>
        <title></title>
        <script src="jquery-1.8.2.js"></script>
        <script src="source/kendo.all.js"></script>
        <link href="styles/kendo.common.css" rel="stylesheet" />
        <link href="styles/kendo.default.css" rel="stylesheet" />
    </head>
    
    <body>
        <div id="example" class="k-content">
            <div id="grid"></div>
        </div>
    </body>

</html>

JavaScript

$(document).ready(function () {

                    var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {
                                            models: kendo.stringify(options.models)
                                        };
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 30,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: {
                                            editable: false,
                                            nullable: true
                                        },
                ...