JSFiddle - React, Tailwind, and code Playground

by Alex Yu

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="sample">
    <div class="sample-content">
        <div id="datepicker"></div>
    </div>
</script>

<script type="text/x-kendo-template" id="mainLayout">
    <div class="header">HEADER</div>
    <div id="app"></div>
</script>

<div id="container"></div>

CSS

.sample-content {
    padding: 10px; 
    background-color: #999;
    color: #FFF;
    margin: 10px; 
    text-align: center;
}

.header {
    padding: 10px;
    background-color: #EEE;
}

JavaScript

var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
    wrap: false,
    model: kendo.observable({}),
    init: function() {
        // setTimeout(function(){
            $("#datepicker").kendoDatePicker();
        // }, 0);
    }
});

mainLayout.render('#container');

router.route('/', function() {
    mainLayout.showIn('#app', view);
});

router.start();