JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<div id="vertical" style="height: 300px">
    <div>
        <p>
            Outer splitter : top pane
        </p>
    </div>
    <div>
        <div id="horizontal" style="height: 100%; width: 100%; border: 0; overflow:hidden;">
            <div>
                <p>
                    Inner splitter :: left pane
                </p>
            </div>
            <div>
                <p>
                    Inner splitter :: center pane
                </p>
            </div>
            <div>
                <p>
                    Inner splitter :: right pane
                </p>
            </div>
        </div>
    </div>
 </div>

JavaScript

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

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