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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">
    <div class="demo-section k-header">
        <button class="k-button k-button-icontext k-add-button" id="addRuleBtn" data-bind="click:addRecord"><span class="k-icon k-add"></span> Add record</button>
        <div class="box-col" style="width: 420px;">
            
            <h4>Update a record</h4>
            <div data-role="listview"
                 data-edit-template="edit-template"
                 data-template="template"
                 data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                 style="width: 420px; height: 200px; overflow: auto"></div>
        </div>
        <div class="box-col console-section">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
    </div>
    <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view k-widget">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>Product Name</dt>
                <dd>#:ProductName#</dd>
                <dt>Unit Price</dt>
          ...

CSS

html {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.product-view {
    float: left;
    position: relative;
    width: 400px;
    margin: -1px -1px 0 0;
}
.product-view dl {
    margin: 10px 0;
    padding: 0;
    min-width: 0;
}
.product-view dt, dd {
    float: left;
    margin: 0;
    padding: 3px;
    height: 32px;
    width: 180px;
    line-height: 32px;
    overflow: hidden;
}
.product-view dt {
    clear: left;
    padding: 3px 5px 3px 0;
    text-align: right;
    opacity: 0.6;
    width: 100px;
}
.product-view .k-textbox {
    width: auto;
}
.edit-buttons {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 160px;
    padding: 2px 2px 0 3px;
    background-color: rgba(0, 0, 0, 0.1);
}
.edit-buttons .k-button {
    width: 26px;
    margin-bottom: 1px;
}
.k-pager-wrap {
    border-top: 0;
}
span.k-invalid-msg {
    position: absolute;
    margin-left: 6px;
}

JavaScript

var viewModel = kendo.observable({
     isVisible: true,
     onSave: function (e) {
         console.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
     },
     addRecord: function (e) {
         console.log("addRecord");
         var listView = $("#myTestList").data("kendoListView");
         listView.dataSource.insert(0, {
             "ProductID": 999,
             "ProductName": "test",
             "UnitPrice": 2,
             "UnitsInStock": 39,
             "Discontinued": false
         });
     },
     products: new kendo.data.DataSource({
         schema: {
             model: {
                 id: "ProductID"
             }
         },
         batch: true,
         transport: {
             read: {
                 url: "http://demos.telerik.com/kendo-ui/service/products",
                 dataType: "jsonp"
             },
             update: {
                 url: "http://demos.telerik.com/kendo-ui/service/products/update",
                 dataType: "jsonp"
             },
             destroy: {
                 url: "http://demos.telerik.com/kendo-ui/service/products/create",
                 dataType: "jsonp"
             },
             parameterMap: function (options, operation) {
                 if (operation !== "read" && options.models) {
                     return {
                         models: kendo.stringify(options.models)
                     };
                 }
             }
         }
     })
 });
 kendo.bind($("#example"), viewModel);