JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="//cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.layout.css">
<link rel="stylesheet" href="//cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css">
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js-data/continents-with-countries-and-cities"></script>
<div id="splitLayout">
    <div class="header">Locations by Region</div>
    <div class="left">
        <ul id="tree"></ul>
    </div>
    <div id="detailSplitter" class="center">
        <div>
            <table id="grid"></table>
        </div>
        <div>
            <div id="map"></div>
        </div>
    </div>
    <div class="footer">Copyright &copy; 2015 Infragistics, Inc.</div>
</div>

CSS

body {
    font-family:'segoe ui', 'arial', 'helvetica', 'sans-serif';
}
div#splitLayout .left, div#splitLayout .right, div#splitLayout .center, div#splitLayout .footer, div#splitLayout .header {
}
div#splitLayout .center {
}
div#splitLayout .right {
}
div#splitLayout .left {
}
div#splitLayout .header {
    font-size: 2rem;
}
div#splitLayout .footer {
    margin-top: 20px;
    font-size: .8rem;
}
#splitLayout {
    height: 620px;
}

.ui-igsplitter-splitbar-vertical.ui-igsplitter-splitbar-default {
  width: 2px;
}

#map {
    overflow: hidden;
}

JavaScript

$(function () {
    $('#splitLayout').igLayoutManager({
        layoutMode: "border",
        borderLayout: {
            leftWidth: "20%",
            rightWidth: "0%"
        }
    }).find(".ig-layout-border-right").remove();
    
    $('#splitLayout .ig-layout-border-container').igSplitter({
        panels: [{
            size: 260,
            min: 260,
            resizable: true
        }]
    });
    $("#detailSplitter").igSplitter({
        panels: [{
            size: 400,
            min: 400,
            resizable: true
        }, {
            size: 400,
            min: 200
        }]
    });
    $("#tree").igTree({
        dataSource: continentsWithCountriesAndCitiesCoordinates,
        dataSourceType: "json",
        bindings: {
            textKey: "Text",
            valueKey: "Text",
            childDataProperty: "Countries"
        }
    });
    
    $("#map").igMap({
        width: "100%",
        height: "400px",
        crosshairVisibility: "collapsed",
        overviewPlusDetailPaneVisibility: "collapsed",
        overviewPlusDetailPaneBackgroundImageUri: "http://igniteui.com/images/samples/splitter/world.png",
        panModifier: "control",
        backgroundContent: {
            type: "openStreet"
        },
        windowResponse: "immediate",
        windowRect: {
            left: 0.27,
            top: 0.20,
            height: 0.45,
            width: 0.45
        }
    });
    
    $("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
        var node = eventArgs.selectedNodes[0];
        if (node.data.Cities) {
            $("#grid").igGrid({
                width: "100%",
                defaultColumnWidth: "25%",
                dataSource: node.data.Cities,
                features: [{
                    name: "Selection",
                    mode: "row",
                    rowSelectionChanged: function (ui, args) {
                        var selectedCity =...