JSFiddle - React, Tailwind, and code Playground

by danielrdevine

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="savingDataWindow" style="display:none">
    <div class="k-loading-image popup"></div>
    <div class="popupText"></div>
</div>

<div id="toastWindow" style="display: none">
    <div class="alert"></div>
</div>

CSS

div.popupText {
    margin: 5px auto;
    width: 100%;
    text-align: center;
}

div.popupButtons{
    margin:15px auto;
    width: 104px;
}

div.popupButtons input{
    width:40px;
    margin-left:5px;
    margin-right:5px;
}

//saving spinner
div.k-loading-image.popup {
    height:48px;
    width:48px;
    margin:15px auto;
    position:relative;
    
}

#toastWindow > .alert{
    margin: auto 0 0 auto;
    text-align:center;
    padding: 5px;    
}

JavaScript

$("#savingDataWindow > .popupText").text("Saving...");
$("#savingDataWindow").kendoWindow(
    {
        width: 300
        , modal: true
        , resizable: false
        , title: false
        , actions: {}
    }).data("kendoWindow");
var win = $("#savingDataWindow").data("kendoWindow");
win.center().open();
setTimeout(function () { win.close(); }, 1500);

setTimeout(function(){
$("#toastWindow").kendoWindow(
    {
        width: "400px"
        ,modal: true,
        resizable: false
        ,title: false
    }).data("kendoWindow");

var toast = $("#toastWindow").data("kendoWindow");
toast.center().open();
setTimeout(function () { toast.close(); }, 1500);
}, 3000);