JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.bootstrap.min.css">
<a href="#" onClick="appConstants.confirmme()">Click ME</a>
<div id="alertDialog"></div>
    <div id="confirmDialog"></div>

JavaScript

; (function () {
    appConstants = new function () {
        var self = this;
      
      
      self.confirmme = function(){
      	if(self.confirm('text',function(){return true;},function(){return false;}))
        {
      	alert('clicked');
      }
      else
      {
      	alert('passed');
      	}
      }
        self.alert=function(text){
            var dialog = $("#alertDialog");
            dialog.kendoDialog({
                width: "400px",
                title: "Alert",
                closable: true,
                modal: false,
                content: "<p>" + text + "<p>",
                actions: [
                    { text: 'OK', primary: true, action: function () { } }
                ]
            });
        };
        self.confirm = function (text,onOK,onCancel) {

            var dialog = $("#confirmDialog");
            dialog.kendoDialog({
                width: "400px",
                title: "Confirm",
                closable: true,
                modal: false,
                content: "<p>" + text + "<p>",
                actions: [
                    { text: 'Cancel', action: onCancel },
                    { text: 'OK', primary: true, action: onOK }
                ],
                close: onCancel,
            });
        };

    };
})();