JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css">
<link rel="stylesheet" href="https://t4t5.github.io/sweetalert/dist/sweetalert.css">
<script src="https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>

CSS

.sweet-alert button.cancel{
  background-color: yellow;
  color: black
}

JavaScript

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  cancelButtonColor: "#DD6B55",
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
}, function(isConfirm) {
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});