JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/> 
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js" ></script> 
    
    <script type="text/javascript">
        $(document).ready(function () {

            var comboDataSource= new kendo.data.DataSource({
                data: []
            });
            comboDataSource.add({text: 'Test1', value: 'data1'});
            comboDataSource.add({text: 'Test2', value: 'data2'});
            comboDataSource.add({text: 'Test3', value: 'data3'});
            comboDataSource.add({text: 'Test4', value: 'data4'});        
            $('#combo').kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: comboDataSource,
                index: 0,
                enable: false,
                change: function () {
                    
                }
            });
        
            var mapListData = $("#combo").data("kendoDropDownList");
                mapListData.text("");
                mapListData.enable(true);
                mapListData.select(function (dataItem) {
                    if (dataItem.hasOwnProperty('text')) {
                        if (dataItem.text == "Test3") {
                            return true;
                        }
                    }
                    return false;
                });
        
            $("#tree").kendoTreeView({
                checkboxes: {
                   ...