JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.css">
<div class="modal-types">
  <button class="type-success">Launch Success Message</button>
 
</div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
}
p {
  line-height: 25px; margin: 30px auto;
  font-size: 17px; font-weight: 300;
  color: #848d94;
  
}
button {
  background-color: #3085d6; color: #fff;
  border: 0; box-shadow: none; border-radius: 3px;
  font-size: 17px; font-weight: 500;
  padding: 15px 35px; margin: 26px 5px 0;
  cursor: pointer;
  white-space: nowrap;
}

.type-success { 
  background-color: #a9df85; 
  text-shadow: 1px 1px 1px green; 
  border: 1px solid green;
 }
 
 .type-error { 
  background-color: #ec7375; 
  text-shadow: 1px 1px 1px red; 
  border: 1px solid red;
 }
 
 .type-info { 
  background-color: #54c2ee; 
  text-shadow: 1px 1px 1px blue; 
  border: 1px solid blue;
 }
 
 .type-warning { 
  background-color: #f4bc86; 
  text-shadow: 1px 1px 1px orange; 
  border: 1px solid orange;
 }
 
 .type-question { 
  background-color: #8aacbd; 
  text-shadow: 1px 1px 1px black; 
  border: 1px solid black;
 }

JavaScript

$('.modal-types button').on('click', function () {
    var type = $(this).attr('class').slice(5)
    
    
   swal({
  title: 'Guardando datos',
  text: 'Por favor espere...',
  timer: 5000,
  onOpen: () => {
    swal.showLoading()
  }
}).then((result) => {
  if (
    // Read more about handling dismissals
    result.dismiss === swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})
  })