JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div class="k-toolbar"> 
 <input type="text" id="inputColor"></input> 
 <button id="addColorButton">Add Color</button> 
</div> 
<div id="grid"></div>

JavaScript

var colors = [{ 
        "ID": 1, 
        "Name": "Blue"}, 
        { 
        "ID": 2, 
        "Name": "Red" 
        }];
    
var dataModel = new kendo.data.Model.define({id: "ID"}); 
var localDataSource = new kendo.data.DataSource({
            transport:{ 
                read: function(options){ 
                    options.success(colors); 
                }, 
                create: function(){ 
                    alert('Creating...'); 
                } 
            }, 
            schema: {                 
                model: dataModel 
            } 
        });    

    $('#grid').kendoGrid({
 
        dataSource: localDataSource,
 
        columns: [{title:"Color", field:"Name"}]
 
        });
 
  
 
    $('#addColorButton').bind("click", function(){
 
        localDataSource.add({
 
            Name: $('#inputColor').val()
 
            });
 
        localDataSource.sync();
        alert(colors.length);
 
        });