JSFiddle - React, Tailwind, and code Playground

by PaulSinnema

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="vertical">
    <div id="top-pane">
        <div id="horizontal">
            <div id="left-pane">
                <div class="pane-content">
                    <div id="tabstrip">
                        <ul>
                            <li>Control IT</li>
                            <li class="k-state-active">MOS</li>
                        </ul>
                        <div>
                            <div id="panel1"></div>
                        </div>
                        <div>
                            <div id="panel2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="right-pane">
                <div class="pane-content">
                    <div id="panel3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body
{
    height: 100%;
}

html
{
    height: 100%;
}

#panel1
{
    height: 100%;
}
#horizontal
{
    height: 100%;
    margin: 0 auto;
}
#vertical
{
    height: 100%;
    margin: 0 auto;
}
#top-pane
{
    height: 100%;
}
#left-pane
{
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
#right-pane
{
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
.pane-content
{
    height: 100%;
    padding: 0 10px;    
}

JavaScript

$(function() {
    var MOSDataSource = new kendo.data.HierarchicalDataSource({
        data: [
            {
            text: "MOS Opdrachtgever 1",
            items: [
                {
                text: "MOS Groep 1",
                items: [
                    {
                    text: "MOS Object 1"}
                ]},
            {
                text: "MOS Groep 2"},
            {
                text: "MOS Groep 3"}
            ]},
        {
            text: "MOS Opdrachtgever 2",
            items: [
                {
                text: "MOS Groep 1"},
            {
                text: "MOS Groep 2"},
            {
                text: "MOS Groep 3"}
            ]}
        ]
    });

    var CITDataSource = new kendo.data.HierarchicalDataSource({
        data: [
            {
            text: "CiT Opdrachtgever 1",
            items: [
                {
                text: "CiT Groep 1",
                items: [
                    {
                    text: "CiT Object 1"}
                ]},
            {
                text: "CiT Groep 2"},
            {
                text: "CiT Groep 3"}
            ]},
        {
            text: "CiT Opdrachtgever 2",
            items: [
                {
                text: "CiT Groep 1"},
            {
                text: "CiT Groep 2"},
            {
                text: "CiT Groep 3"}
            ]}
        ]
    });

    var PADDataSource = new kendo.data.HierarchicalDataSource({
        data: [
            {
            text: "PAD Opdrachtgever 1",
            items: [
                {
                text: "PAD Baseline 1",
                items: [
                    {
                    text: "PAD Object 1"}
                ]},
            {
                text: "PAD Baseline 2"},
            {
                text: "PAD Baseline 3"}
            ]},
        {
            text: "PAD Opdrachtgever 2",
            items: [
                {
                text: "PAD Baseline...