JSFiddle - React, Tailwind, and code Playground
by ChrisFoster
HTML
<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">
<div id="example" class="k-content">
<div class="k-toolbar k-grid-toolbar">
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
<div id="listView"></div>
<div id="pager" class="k-pager-wrap">
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product-view">
<dl>
<dt>Product Name</dt>
<dd>${ProductName}</dd>
<dt>Unit Price</dt>
<dd>${kendo.toString(UnitPrice, "c")}</dd>
<dt>Units In Stock</dt>
<dd>${UnitsInStock}</dd>
<dt>Discontinued</dt>
<dd>${Discontinued}</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
</div>
</div>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view">
<dl>
<dt>Product Name</dt>
<dd>
<input type="text" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
<span data-for="ProductName" class="k-invalid-msg"></span>
</dd>
<dt>Unit Price</dt>
<dd>
<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1"...