JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/hierarchical-files"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<h2>File Manager</h2>
    <div class="containerTree">
        <div id="right">
            <div id="trash" class="ui-widget-content ui-state-default">
                <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash"></span>Trash</h4>
            </div>
        </div>
        <div id="left">
            
            <div id="tree">
            </div>

            
            <div id="modalDialog">
                <div class="containerModalDialog">
                    <div id="leftYes">
                        <button id="yesModalDialog">
                        </button>
                    </div>

                    <div id="rightNo">
                        <button id="noModalDialog">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.clear {
            clear: both;
        }

        #trash {
			margin-top: 10px;
            height: 150px;
            padding: 1%;
        }

            #trash h4 {
                line-height: 16px;
                margin: 0 0 0.4em;
            }

                #trash h4 .ui-icon {
                    float: left;
                }

        .containerTree {
			margin-top: 10px;
            overflow: auto;
        }

        #tree {
            width: 330px;
        }

        #left {
            margin-right: 150px;
        }

        #right {
            width: 150px;
            float: right;
        }

        .containerModalDialog {
            overflow: auto;
            width: 180px;
            margin: 0 auto;
            padding-top: 5px;
			height: 35px;
        }

        #leftYes {
            float: left;
        }

        #rightNo {
            float: right;
        }

        @media screen and (max-width: 500px) {
            #right {
                float: none;
            }
    		#trash { 
				margin-bottom: 10px;
    		}
    		.containerModalDialog { 
				width: 160px;
    		}
    		.containerModalDialog #leftYes, .containerModalDialog #rightNo { width: 70px; }
    		#yesModalDialog, #noModalDialog { width: 65px!important; }
        }

JavaScript

$(function () {            

            var deletedNode,
				helperText;

            // Initialize the igDialog
            $("#modalDialog").igDialog({
                imageClass: "ui-icon ui-icon-alert",
                state: "closed",
                modal: true,
                draggable: false,
                resizable: false
            });

            // Initialize buttons for the Modal igDialog with igButton
            $("#yesModalDialog").igButton({ labelText: "Yes", width: 80 });
            $("#noModalDialog").igButton({ labelText: "No", width: 80 });

            $("#yesModalDialog").on("click", function (e) {
                if (helperText) {
                    var node = $("#tree").igTree("findNodesByText", helperText);
                    if (node.length > 0) {
                        $("#tree").igTree("removeAt", node[0].path);
                        $("#tree").igTree("addNode", node[0].data, deletedNode[0].element);
                        helperText = "";
                    }
                }
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            $("#noModalDialog").on("click", function (e) {
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            // Initialize the igTree
            $("#tree").igTree({
                checkboxMode: "triState",
                singleBranchExpand: true,
                dataSource: files,
                dataSourceType: "json",
                initialExpandDepth: 0,
                pathSeparator: ".",
                bindings: {
                    textKey: "Text",
                    valueKey: "Value",
                    imageUrlKey: "ImageUrl",
                    childDataProperty: "Folder"
                },
                // Enable Drag-and-drop feature
                dragAndDrop: true,
                dragAndDropSettings: {
                   ...