JSFiddle - React, Tailwind, and code Playground

HTML

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


</body>
</html>

JavaScript

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverPaging: true,
                            serverSorting: true,
                            batch: true,
                            pageSize: 100,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            },
                            schema:{
                                model:{
                                    id:"OrderID",
                                    fields:{
                                        OrderID:{
                                            editable:false
                                        },
                                        CustomerID:{
                                            editable:false
                                        },
                                        ShipName:{
                                            editable:true
                                        },
                                        ShipCity:{
                                            editable:true
                                        }                                        
                                    }
                                }                                                            
                            }
                        },
                        height: 280,
                        scrollable: {
                            virtual: true
                        },
                        sortable: true,
                        editable: true,
                        columns: [
                            "OrderID",
                            "CustomerID",
                            { field:"ShipName", title:"Ship Name" },
                            { field: "ShipCity", title:"Ship City" }
      ...