JSFiddle - React, Tailwind, and code Playground

by delebash

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">

		<!-- grid element -->
		<div id="grid" style="width: 700px; margin: 0 auto;"></div>

		<!-- popup editor template -->
		<script id="popup_editor" type="text/x-kendo-template">
			<p>Custom editor template</p>
			
			<div class="k-edit-label">
			<label for="FirstName">Firs Name</label>
			</div>
			<input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName" required>
			<span class="k-invalid-msg" data-for="FirstName"></span>
			
			<div class="k-edit-label">
			<label for="LastName" style="color: red;">Last Name</label>
			</div>
			<input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName" required>

			<div class="k-edit-label">
			<label for="BirthDate">Birth Date</label>
			</div>
			<!-- datepicker editor for field: "BirthDate" -->
			<input type="text"
			name="BirthDate"
			data-type="date"
			data-bind="value:BirthDate"
			data-role="datepicker" required />

			<div class="k-edit-label">
			<label for="Age">Age</label>
			</div>
			<!-- numeric textbox editor for field: "Age" -->
			<input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" required />

		</script>

JavaScript

var data = createRandomData(50);

      $(document).ready(function () {
          $("#grid").kendoGrid({
              dataSource: {
                  data: data,
                  schema: {
                      model: {
                          fields: {
                              FirstName: {
                                  type: "string"
                              },
                              LastName: {
                                  type: "string"
                              },
                              City: {
                                  type: "string"
                              },
                              Title: {
                                  type: "string"
                              },
                              BirthDate: {
                                  type: "date"
                              },
                              Age: {
                                  type: "number"
                              }
                          }
                      }
                  },
                  pageSize: 10
              },
              height: 450,
              scrollable: true,
              sortable: true,
              pageable: true,
              editable: {
                  mode: "popup",
                  template: $("#popup_editor").html()
              },
              edit: function (e) {
                  $(e.container).parent().css({
                      width: '70%'
                  });
              },
              toolbar: ["create"],
              columns: [{
                  field: "FirstName",
                  title: "First Name",
                  width: 100
              }, {
                  field: "BirthDate",
                  title: "Birth Date",
                  template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
              }, {
                  field: "Age",
                  width: 100
              }, {
                  command: ["edit",...