JSFiddle - React, Tailwind, and code Playground

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="main-content" class="k-content">
    <div class="current-state">
        <h4>Current view model state:</h4>
        <pre>
    {
        data point 1: <span data-bind="text: ds.DataPoint1"></span>,
        data point 2: <span data-bind="text: ds.DataPoint2"></span>,
        data point 3: <span data-bind="text: ds.DataPoint3"></span>
    }
        </pre>
    </div>
    <div id="content-sub1">
        <form>
            <ul>
                <li><label class="k-label" for="datapoint1">Data Point 1:</label><input class="k-textbox" id="datapoint1" name="datapoint1" data-bind="value: ds.DataPoint1" /></li>
                <li><label class="k-label" for="datapoint2">Data Point 2:</label><input class="k-textbox" id="datapoint2" name="datapoint2" data-bind="value: ds.DataPoint2" /></li>
                <li><label class="k-label" for="datapoint3">Data Point 3:</label><input class="k-textbox" id="datapoint3" name="datapoint3" data-bind="value: ds.DataPoint3" /></li>
            </ul>
        </form>
    </div>
</div>

JavaScript

$(document).ready(function () {

            var localData = {
                "d": [
                        {
                            "DataPoint1": "101",
                            "DataPoint2": "exceedance",
                            "DataPoint3": "Ceiling reached or exceeded."
                        }
                ]
            };

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: function (opts) {
                        opts.success(localData);
                    }
                },
                schema: {
                    data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                    total: function (result) {
                        result = result.d || result;

                        if (result != null) {
                            return result.length;
                        }
                    },
                    model: {
                        id: "DataPoint1",
                        fields: {
                            DataPoint1: { type: "number", nullable: false, validation: { required: true } },
                            DataPoint2: { type: "string", nullable: false, validation: { required: true } },
                            DataPoint3: { type: "string", nullable: false, validation: { required: true } }
                        }
                    }
                }
            });
    
            dataSource.read();
    
            var viewModel = kendo.observable({
                ds: dataSource.data()[0],
                hasChanges: false,
                change: function () {

                    this.set("hasChanges", true);

                }
            });

            kendo.bind($("#main-content"), viewModel);

        });