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://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/continents-with-countries-and-cities"></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>

<div id="splitter">
        <div>
            <ul id="tree"></ul>
        </div>
        <div id="detailSplitter">
            <div>
                <div id="map"></div>
            </div>
            <div>
                <table id="grid"></table>
            </div>
        </div>
    </div>

CSS

#map {
            overflow: hidden;
        }

JavaScript

$(function () {
            $("#splitter").igSplitter({
                height: 700,
                expanded: function (evt, ui) {
                    $("#grid_headers").css("width", "100%");
                    $("#grid").css("width", "100%");
                },
                panels: [
                    { size: 200, min: 100, max: 250 },
                    { collapsible: true }
                ]
            });
            $("#detailSplitter").igSplitter({
                orientation: "horizontal",
                panels: [
                    { size: 500, collapsible: true },
                    { size: 200, collapsible: true }
                ]
            });
            $("#tree").igTree({
                dataSource: continentsWithCountriesAndCitiesCoordinates,
                dataSourceType: "json",
                bindings: {
                    textKey: "Text",
                    valueKey: "Text",
                    childDataProperty: "Countries"
                },
                rendered: onTreeRendered,
                selectionChanged: onTreeSelectionChanged
            });

            function onTreeRendered(evt, ui) {
                var unitedStatesNodeElement = ui.owner.nodeByPath("0_0");
                var unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);

                initMap();
                initCitiesGrid(unitedStatesNode.data.Cities);

                ui.owner.expandToNode(unitedStatesNodeElement);
                ui.owner.select(unitedStatesNodeElement);
            }

            function onTreeSelectionChanged (sender, eventArgs) {
                var node = eventArgs.selectedNodes[0];
                zoomMapTo(node.data.Latitude, node.data.Longitude, 23);

                $("#grid").igGrid("dataSourceObject", node.data.Cities);
                $("#grid").igGrid("dataBind");

                $("#detailSplitter").igSplitter("expandAt", 1);
            }
        
            function initMap() {
           ...