JSFiddle - React, Tailwind, and code Playground

by efinkel

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<div data-role="view" data-title="Login" id="loginView">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        <p>Please log in below using your network ID and password.</p>
        
        <ul data-role="listview" data-style="inset" id="loginForm">
            <li>
                <label for="username">Username:</label>
                <input type="text" id="username" /></li>
            <li>
                <label for="password">Password:</label>
                <input type="password" id="password" /></li>
        </ul>

        

        <a data-click="loginClick" id="loginButton" type="button" data-role="button">Login</a>
    
        <div id="responsePane"></div>
    </div>

CSS

#loginButton
{
    float: right;
    margin-top: 1em;
    margin-right: 1.2em;
}

JavaScript

function loginClick(){
    var $rp = $("#responsePane");
    
    $rp.html($rp.html() + "Login button clicked<br/>");
}

$(function(){
    var app = new kendo.mobile.Application(document.body);
})