JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
  
<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>City:<select name="city" data-role="dropdownlist" data-source="cities"></select></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
    var cities = new kendo.data.DataSource({
        data: ["Berlin", "Tokio"]
    });

    $("#grid").kendoGrid({
        columns: [
            { field: "name" },
            { field: "age" },
            { command: "edit" }
          ],
                dataSource: {
                    data: [
              { id: 1, name: "Jane Doe", age: 30, city: "Berlin" },
              { id: 2, name: "John Doe", age: 33, city: "Tokio" }
            ],
            schema: {
                model: { id: "id" }
            }
        },
        editable: {
            mode: "popup",
            template: kendo.template($("#popup-editor").html())
        }
    });
</script>