JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>

            <div data-role="pane" id="right" data-layout="rightLayout">
                <div data-role="view" id="tabletDetail">
                    <a data-role="button" data-rel="modalview" href="#modalview-login" id="login-button">Log In</a>
                    <div data-role="modalview" id="modalview-login">
                        <div data-role="header">
                            <div data-role="navbar">
                                Log In
                            </div>
                        </div>
                        <ul data-role="listview" data-style="inset">
                            <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="loginCall" id="loginButotn" type="button" data-role="button">LogIn</a>
                    </div>
                </div>
            
                <div data-role="layout" data-id="rightLayout">
                </div>
            </div>
        </div>

JavaScript

function splitViewInit() {
    $("#modalview-login").data("kendoMobileModalView").open();
}

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