JSFiddle - React, Tailwind, and code Playground

by PaulSinnema

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.js"></script>
<link rel="stylesheet" href="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.css">
 <div id="panel1">s</div>

<ul id="PADMenu" class="contextMenu">
    <li class="create">
        <a href="#create">add node</a>
    </li>
     <li class="delete">
        <a href="#delete">delete node</a>
    </li>
</ul>

CSS

body
{
    height: 100%;
}

html
{
    height: 100%;
}

#panel1
{
    height: 100%;
}
#horizontal
{
    height: 100%;
    margin: 0 auto;
}
#vertical
{
    height: 100%;
    margin: 0 auto;
}
#top-pane
{
    height: 100%;
}
#left-pane
{
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
#right-pane
{
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
.pane-content
{
    height: 100%;
    padding: 0 10px;    
}

JavaScript

$(function() {
    var PADDataSource = new kendo.data.HierarchicalDataSource({
        data: [
            {
            text: "Item 1",
            id: 1,
            items: [
                {
                text: "Item 2",
                id: 2,
                items: [
                    {
                    text: "Item 3",
                    id: 3}
                ]},
            {
                text: "Item 4",
                id: 4},
            {
                text: "Item 5",
                id: 5}]},
        {
            text: "Item 6",
            id: 6,
            items: [
                {
                text: "Item 7",
                id: 7,
                items: [
                    {
                    text: "Item 8",
                    id: 8}
                ]},
            {
                text: "Item 9",
                id: 9},
            {
                text: "Item 10",
                id: 10}
            ]}
        ],
        change: onchange
    });

    
    
    $("#horizontal").kendoSplitter({
        orientation: "horizontal",
        panes: [
            {
            collapsible: true,
            size: "400px",
            scrollable: true},
        {
            collapsible: false,
            size: "100%",
            scrollable: true}
        ]
    });

    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });

    var treeview = $("#panel1").kendoTreeView({
        dragAndDrop: false,
        dataSource: PADDataSource 
    }).data("kendoTreeView");
    
    function attachMenuToAllItems()
    {
        $("#panel1 .k-item .k-in").each(function() {
                createMenu(this);
        });        
    }
    
    attachMenuToAllItems();
    
    function onchange()
    {
        setTimeout(function() {
            attachMenuToAllItems();                         
        }, 100);
    }

    function createMenu(item) {
       ...