JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="inputWindow">
    <label for="userinput">Input:</label>
    <input type="text" name="userinput" id="userinput" title="Input" />
</div>

JavaScript

var handleUserInput = function(){
    var userinput = ($("#userinput").val());
    alert(userinput);
}

var win = $("#inputWindow")
    .kendoWindow({
        actions: ["Maximize", "Close"],
        animation: {
            open: {
                effects: "slideIn:down fadeIn",
                duration: 500
            },
            close: {
                effects: "slide:up fadeOut",
                duration: 500
            }
        },
        minWidth: 300,
        modal: true,
        resizable: true,
        title: "Choose File to Upload",
        visible: false,
        
    })
    .data("kendoWindow")
    .center();

var wrapper = win.wrapper;
wrapper.css({top: 25});
win.open();