JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<div id="window">
                <table id="grid">
                <colgroup>
                    <col />
                    <col />
                    <col style="width:110px" />
                    <col style="width:120px" />
                    <col style="width:130px" />
                </colgroup>
                <thead>
                    <tr>
                        <th data-field="make">Car Make</th>
                        <th data-field="model">Car Model</th>
                        <th data-field="year">Year</th>
                        <th data-field="category">Category</th>
                        <th data-field="airconditioner">Air Conditioner</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Volvo</td>
                        <td>S60</td>
                        <td>2010</td>
                        <td>Saloon</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>Audi</td>
                        <td>A4</td>
                        <td>2002</td>
                        <td>Saloon</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>BMW</td>
                        <td>535d</td>
                        <td>2006</td>
                        <td>Saloon</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>BMW</td>
                        <td>320d</td>
                        <td>2006</td>
                        <td>Saloon</td>
                        <td>No</td>
                    </tr>
       ...

CSS

#example 
                {
                    min-height:500px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                	float: left;
                	margin: 30px 30px 120px 30px;
                	text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }

div.k-window-content {
    padding: 0px;
}
}

JavaScript

$(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

                    var onClose = function() {
                        undo.show();
                    }

                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "99.5%",
                            title: "About Alvar Aalto",
                            refresh: function() {},
                            actions: [
                                "Minimize",
                                "Refresh",
                                "Custom"                                
                            ],
                            refresh: function(){},
                            close: onClose,
                            draggable: false
                        });
                    }
    window.data("kendoWindow").wrapper.find(".k-i-custom").click(function(e){
                        alert("Custom action button clicked");
                        e.preventDefault();
                    });
    
    $("#grid").kendoGrid({
                        height: 430,
                        sortable: true,
        pageable: {
                            pageSize: 10,
                            pageSizes: true
                        }
                    });
                });