JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<button class="delete-button k-button">Delete record</button>

<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message">Are you sure?</p>

    <button class="delete-confirm k-button">Yes</button>
    <a href="#" class="delete-cancel">No</a>
</script>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
    width: 500px;
}

.delete-message {
    width: 12em;
}

.delete-cancel {
    color: #000;
}

JavaScript

$(".delete-button").click(function(e) {
    e.preventDefault();
    
    var kendoWindow = $("<div />").kendoWindow({
            title: "Confirm",
            resizable: false,
            modal: true
        });
    
    kendoWindow.data("kendoWindow")
        .content($("#delete-confirmation").html())
        .center().open();
    
    kendoWindow
        .find(".delete-confirm,.delete-cancel")
            .click(function() {
                if ($(this).hasClass("delete-confirm")) {
                    alert("Deleting record...");
                }
                
                kendoWindow.data("kendoWindow").close();
            })
            .end()
});