JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
    <script id="treeview-template" type="text/kendo-ui-template">
        #= item.text #
        # if(!item.items) { #
            <a class='k-icon delete-link' href='\#'></a>
        # } #
    </script>

    <script id="treeview-checkbox-template" type="text/kendo-ui-template">
        <input type="checkbox" name="checkedFiles[#= item.id #]" value="true" />
    </script>

    <div id="quex-qtree">
        <div class="pane-content">
            <ul class="sortable">
                <li class="ui-state-default">
                    <div class="cont-chek"><input type="checkbox" /><div class="cont-move">Handle</div></div>
                    <div class="cont-qstn"><div class="kendo-tree"></div></div>
                </li>
                <li class="ui-state-default">
                    <div class="cont-chek"><input type="checkbox" /><div class="cont-move">Handle</div></div>
                    <div class="cont-qstn"><div class="kendo-tree"></div></div>
                </li>
            </ul>
        </div>
    </div>

CSS

html {
            font                  : 75% 'Lucida Sans Unicode', 'Lucida Grande', Arial, Helvetica, sans-serif;
        }

        html, body {
            width                 : 100%;
            height                : 100%;
            margin                : 0px;
            padding               : 0px;
            overflow              : hidden;
        }

        #quex-qtree {
            width                 : 100%;
            height                : 100%;
        }

        ul.sortable {
            list-style-type       : none;
            margin                : 0;
            padding               : 0;
            margin-bottom         : 10px;
        }

        ul.sortable li {
            margin                : 5px;
            padding               : 5px;
            overflow              : hidden;
        }

        .cont-chek {
            width                 : 24px;
            min-height            : 150px;
            float                 : left;
            text-align            : center;
            vertical-align        : middle;
            background-color      : #f3f781;
        }

        .cont-qstn {
            width                 : 275px;
            min-height            : 150px;
            float                 : left;
        }

        .cont-move {
            width                 : 24px;
            height                : 24px;
            cursor                : pointer;
        }

        .sortable .ui-state-default, .sortable .ui-widget-content .ui-state-default, .sortable .ui-widget-header .ui-state-default {
            background            : #fff;
            color                 : #000;
        }

        .delete-link {
            width                 : 12px;
            height                : 12px;
            background-position   : -34px -18px;;
            overflow              : hidden;
            display               : inline-block;
            font-size             : 0;
           ...

JavaScript

$(document).ready(function() {
            // ---------------------------
            // LAYOUT
            // ---------------------------
            $("#quex-qtree").kendoSplitter({
                panes : [{collapsible : false, resizable : false}, {collapsible : false, resizable : false}]
            });

            // ---------------------------
            // TILES
            // ---------------------------
/* jQuery UI works as expected */
            $(".sortable").sortable({revert : true, handle : $(".cont-move", this), axis : "y"});

/* Can't get Kendo UI to do the same thing */
//            $(".sortable li").kendoDraggable({
//                filter : "div.cont-move"
//            ,   hint   : function(item) {
//                    return $(item).html();
//                }
//            });

            // ---------------------------
            // TILES CHECKBOXES
            // ---------------------------
            $(".cont-chek").bind("click", function() {
                $("input", this).prop("checked", !$("input", this).prop("checked"));

                high_lite_tile($(this));
            });
            $(".cont-chek input").bind("click", function() {
                $(this).prop("checked", !$(this).prop("checked"));

                high_lite_tile($(this));
            });
            $(".cont-chek .cont-move").bind("click", function() {
                return false;
            });

            // ---------------------------
            // CHECKBOX POSITIONING
            // ---------------------------
            $(".cont-chek input").each(function() {
                pstn_chek($(this));
            });

            // ---------------------------
            // TREES
            // ---------------------------
            $(".kendo-tree").kendoTreeView({
                template         : kendo.template($("#treeview-template").html())
            ,   checkboxTemplate : kendo.template($("#treeview-checkbox-template").html())
            , ...