JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<body>
        <div id="main">
            <ul id="menu" data-role="panelbar" style="width:20%;display: inline-block;float:left">
                <li>
                    menu
                    <ul>
                        <li>
                            <a>submenu1</a>
                        </li>
                        <li>
                            <a>submen2</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="detail" style="width:78%;margin-left:21%">
                <div id="contentgrid" data-role="grid"
                data-bind="source: gridSource"
                data-toolbar='[{"name" : "create","text" : "new"}]'
                ></div>
            </div>
        </div>
        
    </body>

JavaScript

$(function(){var viewModel = kendo.observable({
                gridSource : [{
                    Name : "Chai",
                    Price : 18.00,
                    UnitsInStock : 39
                }, {
                    Name : "Chang",
                    Price : 19.00,
                    UnitsInStock : 17
                }, {
                    Name : "Mishi Kobe Niku",
                    Price : 97.00,
                    UnitsInStock : 29
                }]
            })
                 kendo.bind($("#main"), viewModel); });