JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div data-role="view" id="startScreen">loading...</div>

<!-- phone -->
<div data-role="view" id="phoneSignIn" data-layout="phoneHeader" data-transition="overlay:up" style="display:none;">
            <ul data-role="listview" data-style="inset">
                <li><label for="phoneSignInEmail">Email:</label> <input type="text" id="phoneSignInEmail" /></li>
                <li><label for="phoneSignInPassword">Password:</label> <input type="password" id="phoneSignInPassword" /></li>
                <li>
                    <center>
<a data-role="button" data-click="signInButton" href="#phoneMain">Sign In</a>
<a data-role="button" href="javascript:signInButton();">Sign In 2</a>
<a data-role="button" onclick="signInButton()">Sign In 3</a>
                    </center>
                </li>
            </ul>
        </div>

<div data-role="view" id="phoneMain" data-layout="phoneDefault" data-transition="overlay:left" style="display:none;">
    Main
       </div>

       <div data-role="view" id="phoneDetail" data-layout="phoneSubmit" data-transition="overlay:up" style="display:none;">
           <h1>Settings</h1>
       </div>

       <div data-role="view" id="phoneSettings" data-layout="phoneSubmit" data-transition="overlay:up" style="display:none;">
           <h1>Settings</h1>
       </div>

<!-- phone layouts -->
       <div data-role="layout" data-id="phoneDefault">
           <div data-role="header">
              <div data-role="navbar">
                    <span>Title</span>
                    <a href="#phoneSettings" data-role="button" data-align="right">Settings</a>
              </div>                       
           </div>
           <!--Content--> 
       </div>

       <div data-role="layout" data-id="phoneSubmit">
           <div data-role="header">
              <div...

JavaScript

var app;
var isPhone;

$(function () {
    isPhone = kendo.support.mobileOS.phone && kendo.support.mobileOS;
    app = new kendo.mobile.Application($(document.body), {
        initial: "#startScreen"                                                       
    });
    
    setTimeout(function(){start();},1000);
});

function start() {
    //alert('start');
    if (isPhone) {
        app.navigate("#phoneSignIn");
    } else {
        app.navigate("#tabletMain");
$("#tabletSignIn").kendoMobileModalView("open");
    }
}

function signInButton(e) {
    alert('signInButton');
    app.navigate("#phoneMain");
}