JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<div>
    <div id="treeview"></div>
</div>     
           
<div id="favorites-window" style="height:175px;width:1000px">
    <div class="report-reader" style="height:165px;width:950px;">
        <div id="listView" style="outline:1px dashed red;height:155px;width:950px"></div>
    </div>                            
</div>

CSS

.report-reader
{   
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.1);    
    -webkit-transform: translatez(0);
    position:relative; /*IE7*/
}
.k-listview
{
    padding: 0;
    border: 0;
}
.report
{
    width: 392px;
    height: 54px;
    margin: 0;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,1);
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);

    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.10)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.10) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.10) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.10) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.10) 100%);
}
.report img
{
    border: 3px solid transparent;
    float: left;
}
.report a:hover img
{
    border: 3px solid #00acec;
}
.report p
{
    float: left;
    margin: 0;
    padding: 0 0 0 10px;
    width: 300px;
}
.report:after
{
    scontent: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

JavaScript

$("#favorites-window").kendoWindow({
        width: "1000",
        height: "185",
        resizable: false,
        draggable: false,        
        actions: ["Custom"],
        title: "Favorites"
    });

 var listDataSource = new kendo.data.DataSource({});
    
 $("#listView").kendoListView({
        height: "155",
        width:"950",
        dataSource : listDataSource,
        selectable: "single",
        navigatable: true,     
        template: kendo.template("<div class=\"report\"><p>#:text#</p></div>")
    });
    
    $("#listView").data("kendoListView").element.kendoDropTarget({
        drop: function (e) {
            listDataSource.add({ text: e.draggable.hint.text() });           
        }
    });

var inlineDefault = new kendo.data.HierarchicalDataSource({
                    data: [
                        { text: "Furniture", items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ] },
                        { text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ] }
                    ]
                });

 
        $("#treeview").kendoTreeView({
            dragAndDrop: true,
            dataSource: inlineDefault,
            dataTextField: "text"            
        });

 $("#treeview").data("kendoTreeView").bind("dragstart", function (e) {
            var targetNode = $("#treeview")
                              .data("kendoTreeView")
                              .dataItem(e.sourceNode);
     
            if (targetNode.hasChildren === true) {
                e.preventDefault();
            }
        });

$("#treeview").data("kendoTreeView").bind("drag", function(e) {
    var target = $(e.dropTarget);
   ...