JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="app">
    
</div>

JavaScript

(function($,kendo){
    
    var layoutModel = {
        template: '<div><div id="content"></div><div id="contentWrapped"></div></div>'
        , show:function(){}
        , hide: function(){}
        , model: kendo.observable({})
    }
    , layout = new kendo.Layout(layoutModel.template, layoutModel)
    , router = new kendo.Router({init:function(){layout.render('#app');}})
    , viewModel= {
        template:'<div class="bi-bar-params" style="position:absolute;top:5px;right:5px;z-index:1;">' + 
        '<input id="ddl1" /> <input id="ddl2" /> <input id="ddl3" />' +
        '</div>' + 
        '<div id="grid"></div>'
        , templateWrapped: '<div>' + 
        '<div class="bi-bar-params" style="position:absolute;top:50px;right:5px;z-index:1;">' + 
        'Wrapped<input id="ddl1" /> <input id="ddl2" /> <input id="ddl3" />' +
        '</div>' + 
        '<div id="grid"></div>' +
        '</div>'
        , show:function(){}
        , hide: function(){}
        , model: kendo.observable({})
    }
    , view = new kendo.View(viewModel.template,view)
    , viewWrapped = new kendo.View(viewModel.templateWrapped,view);
    
    //add route
    router.route('/', function () {
        layout.showIn('#content',view)
        layout.showIn('#contentWrapped',viewWrapped)
    });
    
    //start router
    router.start();
    
})(jQuery,kendo);