JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.min.css">
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>


 <div id="grid"></div>

JavaScript

$(document).ready(function() {
             var myWindow = $("#window"),
               undo = $("#undo"),
               loginButton = $("#login-button");

             loginButton.click(function() {
               var name = $("#name").val();
               var password = $("#password").val();
               var data = {
                 name: name,
                 password: password
               };
               $.post("/echo/json/", {
                   json: JSON.stringify(data)

                 },
                 function(data, status) {
                   console.log(data);
                   alert("Successful log in!");
                   myWindow.data("kendoWindow").close();
                 });
             })

             undo.click(function() {
               myWindow.data("kendoWindow").open();
               undo.fadeOut();
             });

             function onClose() {
               undo.fadeIn();
             }

             myWindow.kendoWindow({
               width: "380px",
               title: "Login",
               visible: false,
               actions: [
                 "Pin",
                 "Minimize",
                 "Maximize",
                 "Close"
               ],
               close: onClose
             }).data("kendoWindow").center();
           });