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://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="form-container">
    <div class="selector">
        Need to get Chai here-<input type="text"   data-bind="value:selectedProduct.ProductName"/><br/><br/>
        Select Product: <select data-role="dropdownlist" data-value-field="ProductID" data-text-field="ProductName"
                         data-bind="source: productsSource, value: selectedProduct"></select>

        <button data-bind="click: save, enabled: hasChanges">Publish All Changes</button>
    </div>
    <div class="form" data-bind="visible: showForm">
        <ul>
            <li><label>ID</label> <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></li>
            <li><label>Name</label> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" /></li>
            <li><label>UnitPrice</label> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" /></li>
        </ul>

        <button data-bind="click: remove">Delete Product</button>
    </div>
</div>

CSS

.demo-section label {
            display: inline-block;
            width: 80px;
            ling-height: 30px;
            height: 30px;
        }

        .demo-section li {
          padding-bottom: 5px;
          list-style: none;
        }

        .demo-section {
           width: 400px;
        }
        .demo-section button {
           float: right;
        }
        .product-info {
        	min-height: 160px;
        }

JavaScript

var crudServiceBaseUrl = "http://demos.kendoui.com/service";

        $(document).ready(function() {
            var viewModel = kendo.observable({
                productsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                            return options;
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                }),
                selectedProduct: null,
                hasChanges: false,
                save: function() {
                    this.productsSource.sync();
                    this.set("hasChanges", false);
                },
                remove: function() {
                    if (confirm("Are you sure you want to delete this product?")) {
                        this.productsSource.remove(this.selectedProduct);
                        this.set("selectedProduct", this.productsSource.view()[0]);
                        this.change();
                    }
                },
        ...