JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<body class="ui-mobile-viewport ui-overlay-b">
	    
	 <!--  BODY START -->
    <div data-role="page" id="login" 
        class="ui-page-theme-b ui-page ui-page-header-fixed ui-page-footer-fixed ui-page-active" 
        style="max-height: 590px; min-height: 118px; padding-top: 44px; padding-bottom: 44px;">
        <div data-role="header" data-position="fixed">
            <h1>Stalker Server Login</h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content" data-inset="true">      
            <label for="server">Stalker Server:</label>
            <input type="text" data-clear-btn="true" name="server" id="server" value="95.211.214.2">
            <label for="username">Username:</label>
            <input type="text" data-clear-btn="true" name="username" id="username" value="">
            <label for="password">Password:</label>
            <input type="text" data-clear-btn="true" name="password" id="password" value="">
            <button id="b_login" data-theme="b">Login</button>
        </div>
        <div data-role="footer" data-position="fixed" role="contentinfo" class="ui-footer ui-bar-b ui-footer-fixed slideup">footer</div>
    </div>

    <div data-role="page" id="genre" 
        class="ui-page-theme-b ui-page ui-page-header-fixed ui-page-footer-fixed" 
        style="max-height: 590px; min-height: 118px; padding-top: 44px; padding-bottom: 44px;">
        <div data-role="header" data-position="fixed">
            <h1>Genre</h1>
        </div>
        <!-- /header -->
        <div role="main" class="ui-content" data-inset="true">      
            <ul id="genres" data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
        </div>
        <div data-role="footer" data-position="fixed" role="contentinfo" class="ui-footer ui-bar-b ui-footer-fixed slideup">footer</div>
    </div>
   
    <div data-role="page" id="video" 
        class="ui-page-theme-b ui-page ui-page-header-fixed...

CSS

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-radius: 0;
}
.form-signin input[type="password"] {
  border-radius: 0;
}

button{
   margin-top: 10px;
   border-radius: important! 0px;
}

JavaScript

/*
apiuser

*/


        $(document).ready(function(){    
            jQuery.support.cors = true; // needed to get cross domain access
            
            $( "#go" ).bind( "click keyup", function(event) {
                alert("test");
                Stalker.login($("#server").val(), $("#username").val(), $("#password").val() );              
            });
        });   






























var Stalker = {
    access_token    : null,
    expires_in      : null,
    user_id         : null,
    refresh_token   : null,
    url             : "",
    api_url         : "",
    auth_url        : "",
    request : function ( url, cb ) {
        try {
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (xhr) {
                    xhr.overrideMimeType("text/plain; charset=x-user-defined");
                    xhr.setRequestHeader('Accept', "application/json");
                    xhr.setRequestHeader('Accept-Language', "ru-RU");
                    xhr.setRequestHeader('Authorization', "Bearer " + Stalker.access_token);
                }
            })
            .done(function (data) {
                //if ( console && console.log ) {
                var jsdata = JSON.parse(data);
                if( "function" == typeof cb ){
                    cb( jsdata );
                }
            });

        } catch (e) {
            alert("Error: " + e);
        }
    },
    getlink : function (id, cb ) {
        try {
            var url = Stalker.api_url + "video/" + id + "/link";
            Stalker.request ( url, 
                function( jsdata ){
                    console.log( jsdata );
                    if( "function" == typeof cb && "OK" == jsdata.status ){
                        cb( jsdata.results )
                    }
                });
                    
        } catch (e) {
            alert("Error: " + e);
        }
    },
    login : function ( server, user, pass ) {
   ...