JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.css">
<div ng-app="myApp">

    <script  type="text/ng-template" id="templateRemove">
        <div class="ngdialog-message">
            <h3>Do you want to remove this ?</h3>
            <p>All data will be lost.</p>
        </div>
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm('OK')">Confirm</button>
            <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
        </div>
    </script>
    
    <div ng-controller="solutionViewCtrl">
        <button ng-click="openConfirmButton()">Click me</button>
    </div>
</div>

CSS

.ngdialog.dialogwidth800 .ngdialog-content{width : 800px;}

JavaScript

var app=angular.module("myApp", ['ngDialog']);

var solutionViewCtrl = function ($scope, ngDialog) {

    $scope.openConfirmButton = function (rel) {
        console.log("click");
        ngDialog.openConfirm({
            template: 'templateRemove',
            className: 'ngdialog-theme-default dialogwidth800',
            scope: $scope
        }).then(

        function (value) {
            console.log("confirm");
        }, function (reason) {
            console.log('Modal promise rejected. Reason: ', reason);
        });
    };
};

solutionViewCtrl.$inject = ['$scope', 'ngDialog'];
app.controller('solutionViewCtrl', solutionViewCtrl);