JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<span>scrollable: <b>false</b></span>
<div id="example" class="k-content">
    <div id="loading" class="demo-section" style="text-align:center">Generating test data...</div>
    <div id="grid"></div>
</div>

JavaScript

generatePeople(500, function (data) {
    $("#loading").hide();
    

    $("#grid").kendoGrid({
        dataSource: {
            data: data,
            pageSize: 300
        },
        height: 500,
        scrollable: false,
        columns: [
                        "Title", 
            "BirthDate", 
            "Age",
                  {
            field: "Id",
            title: "ID",
            width: 100
        }, {
            field: "FirstName",
            title: "First Name",
            width: 330
        }, {
            field: "LastName",
            title: "Last Name",
            width: 330
        }, {
            field: "City",
            title: "City",
            width: 330
        }
            ]
    });
});