JSFiddle - React, Tailwind, and code Playground

by bschafer

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<div data-role="view" id="bugs" data-layout="commonLayout" data-init="settingsInit">
    Bugs
    <table>
        <thead>
            <th>id</th>
            <th>link</th>
            <th></th>
        </thead>
    </table>
</div>
 
<div data-role="view" id="details" data-layout="commonLayout" data-show="favoritesPageShow">
    Details
</div> 
 
<div data-role="layout" data-id="commonLayout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="button" class="nav-button" href="#index">Index</a>
            <span data-role="title">Long case name 123 456</span>
        </div>
        
        <div style="background-color: #666; color: #fff; padding: 3px; text-align: center;">Bug Title</div>
    </header>
    
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a href="#bugs" data-icon="info">Bug List</a>
            <a href="#details" data-icon="details">Details</a>
        </div>
    </footer>
</div>

CSS

table {
}

table td {
    padding: 3px;
}

table th {
    padding: 3px;
    font-weight: bold;
}

JavaScript

function favoritesPageShow(e){
    setTimeout(function() {
        app.navigate("#settings");
    }, 0);
}

function settingsInit() {
    alert(1);
}

var app = new kendo.mobile.Application($(document.body), { initial: "bugs" });