JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
<div id="dialog" class="beatrix-dialog" title="Basic dialog">
<div style="font: normal normal normal 1.5em ITCOfficinaSerifBold; color:#333; line-height-120%;margin:0;">
Aguardando confirmação de pagamento
</div>
<p>Olá Claúdia</p>
<p>Devido ao tempo de processamento, podemos levar até <strong>2 dias úteis</strong> para identificar o pagamento. </p>
</div>
<button id="opener">Open Dialog</button>

<div class="overlay" style="display:none;"></div>

CSS

body {
    background: #f2f2f2 url(/meuvivo/framework/skins/portalvivo/images/img/bg_menu_00.png) repeat-x;
    color: #7e7e7e;
    font: 11px Verdana,Arial,Helvetica,sans-serif;
    height: auto!important;
    width: auto!important;
}

.overlay {
  background-color:rgba(0,0,0,0.85);
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
 }

.beatrix.ui-dialog {
    font-size: 16px;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 0 none;
    overflow: auto;
    padding: 0 !important;
}

.beatrix.ui-corner-all,
.beatrix .ui-corner-all{
  border-radius: 0;
}

.beatrix-dialog {
      padding: 48px 97px !important;
      position: relative;
}


.ui-widget-header {
    background: #7619a5;
    color: #fff;
    border: 0 none;
    overflow: auto;
    font-weight: normal;
    border-bottom: 1px solid #e5e5e5;
    background-color: #7619a5;
  background: -webkit-gradient(left top, right top, color-stop(0%, #611988), color-stop(25%, #611988), color-stop(100%, #bd7cd1));
  background: -webkit-linear-gradient(left, #611988 0%, #611988 25%, #bd7cd1 100%);
  background: linear-gradient(to right, #611988 0%, #611988 25%, #bd7cd1 100%);
}

JavaScript

$(function() {
$( "#dialog" ).dialog({
dialogClass: 'beatrix',
width: 741,
autoOpen: false,
draggable: false,
resizable: false,
title: 'Já pagou?',
    position: { my: "center top", at: "center top+50", of: window },
show: {
effect: "drop",
duration: 800,
    easing:"easeOutExpo",
    direction:"up", 
    distance:300
},
hide: {
effect: "drop",
duration: 800,
    easing:"easeInExpo",
    direction:"up", 
    distance:300, 
},
	close: function( event, ui ) {
  	$( ".overlay" ).hide();
  }
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
$( ".overlay" ).show();
});
});