JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/s/picncks1k0ck9o8/styles.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/p94doltbpn9khdu/themes.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/j9t4fyx1azprgyq/kendo.default.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/p0992yacp2whikj/kendo.common.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/fyxdfbd2fllso6t/base.css">
<script src="https://dl.dropbox.com/sh/wwwqy551otc6j04/UXn5pKQQLF/kendo.all.min.js"></script>
<script src="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/HjMEpNqISw/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/fOib3plRD-/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/ldPn1HSDwI/css/bootstrap-responsive.min.css">
    <div class="content">
        <div class="table"></div>
    </div>

CSS

<style>
    .k-state-selected a {
        color: #FFF;
    }
</style>

JavaScript

$(document).ready(function () {
            var dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: 'https://dl.dropboxusercontent.com/sh/u9oxg5f6uweqh40/CbR3pNVg04/documentj',
                        dataType: 'json',
                        type: 'get',
                        cache: false

                    },

                    update: function(e) { return true; }

                },
                batch: false,
     
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: "number", editable: false, nullable: true },
                            articleId: { type: "number" },
                            SSID: { type: "string", validation: { required: true } },
                            MAC: { type: "string", validation: { required: true, min: 1 } },
                            IP: { type: "string" },
                            UserName: { type: "string", validation: { min: 0, required: true } },
                            Password: { type: "string", validation: { min: 0, required: true } },
                            Brand: { type: "string", validation: { min: 0, required: true } },
                            EhterName: { type: "string", validation: { min: 0, required: false } },
                            Enabled: { type: "boolean", validation: { min: 0, required: false } },
                            LastClientsCount: { type: "number", validation: { min: 0, required: false } },
                            NetworkRule: { type: "string", validation: { min: 0, required: false } },
                        }
                    }
                }

            });

            var itemsBrand = [{ text: "UBNT", value: "UBNT" }, { text: "MIKROTIK", value: "MIKROTIK" }];
            var itemsNetworkrule = [{ text: "AP", value: "AP" }, { text: "LINK", value: "LINK" }];
   ...