JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div data-role="view" data-layout="default" data-title="Foo" id="foo">
    <div style="width:100%;  background-color:red">Foo</div>
</div>

<div data-role="view" data-layout="default" data-init="barInit" data-show="barShow" data-hide="hideBar" id="bar" data-title="Bar">
    <div id="myDiv">Bar</div>
    <div id="calendar"></div>
</div>

<div data-role="layout" data-id="default">
    <div data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </div>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#foo">Foo</a>
            <a href="#bar">Bar</a>
        </div>
    </div>
</div>

CSS

#myDiv {
    width:100%; 
    height: 100px;
    font-size: 2em;
    text-align: center; 
    background-color:red;
    display: none;
}

JavaScript

var app = new kendo.mobile.Application(document.body);

function barInit(e) {
    $("#calendar").kendoCalendar();
}
    
function barShow() {
    $("#myDiv").fadeIn("slow");
}

function hideBar() {
    $("#myDiv").hide();
}