JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="outerContainer" style="position:relative;height:500px;width:600px;margin:auto;">
    <div id="vertical"  style="height: 100%; width: 100%;">
        <div id="top-pane">
            <div id="horizontal" style="height: 100%; width: 100%;">
                <div id="left-pane">
                    <div id="actualTree" class="pane-content" style="height: 100%; width: 100%;">
                    </div>
                </div>
                <div id="right-pane">
                    <div id="actualMap" class="pane-content">
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom-pane">
            <div id="dataTabs" style="height: 100%; width: 100%;">
                <ul>
                    <li class="k-state-active">
                        Tab1
                    </li>
                    <li>
                        Tab2
                    </li>
                    <li>
                        Tab3
                    </li>

                </ul>
                <div>
                    <div id="data1">Data</div>
                </div>
                <div>
                    <div id="data2">Data</div>
                </div>
                <div>
                    <div id="data3">Data</div>
                </div>

            </div>
        </div>
    </div>
</div>

JavaScript

$("#vertical").kendoSplitter({
    orientation: "vertical",
    panes: [
        {
        collapsible: false},
    {
        collapsible: true,
        resizable: true,
        size: "300px"}
    ]
});

$("#horizontal").kendoSplitter({
    panes: [
        {
        collapsible: true,
        size: "220px"},
    {
        collapsible: true,
        size: "220px"}
    ]
});

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

$("#data1").kendoGrid({
    dataSource: {
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [{
        field: "ID",
        width: 90},
    {
        field: "Name",
        width: 90},
    {
        width: 100,
        field: "Description"}
                                                                    ]
});

$("#data2").kendoGrid({
    dataSource: {
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [{
        field: "ID",
        width: 90},
    {
        field: "Name",
        width: 90},
    {
        width: 100,
        field: "Description"}]
});

$("#data3").kendoGrid({
    dataSource: {
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [{
        field: "ID",
        width: 90},
    {
        field: "Name",
        width: 90},
    {
        width: 100,
        field: "Description"}
                                                                    ]
});