JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
  
<div id="treeview"></div>
<script id="template" type="text/kendo-template">
    <style>
        li[data-uid='#=item.uid#'] span.k-state-hover {
            background: #= item.hoverColor # !important;
        }
        span.ob-#=item.uid# {
            color: #= item.text #;
        }
        li[data-uid='#=item.uid#'] span.k-state-selected {
            background: #= item.selectedColor # !important;
            box-shadow: inset 0 0 3px 4px #= item.selectedColor # !important;
        }
    </style>
    <span class="ob-#= item.uid#"> #= item.text #</span>
</script>

JavaScript

$("#treeview").kendoTreeView({
    template: $("#template").html(),
    dataSource: [
        { 
            text: "red", 
            selectedColor: "green", 
            hoverColor: "blue",
        },
        { 
            text: "cyan", 
            selectedColor: "magenta", 
            hoverColor: "yellow",
        },
    ]
});