JSFiddle - React, Tailwind, and code Playground

by Samuel Guimarães

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;
}

.beatrix *,
.beatrix *:before,
.beatrix *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.beatrix .atom-icon:after,
.beatrix .atom-link:after {
    content: "i";
    font-family: VivoIcons;
}

.beatrix .atom-icon.icon-question_mark:after,
.beatrix .icon-question_mark.atom-link:after {
    content: "\EA27";
}

.beatrix .atom-arrow-highlight {
    background-color: #461e5f;
    width: 80px;
    height: 64px;
    float: left;
    position: relative;
    overflow: hidden;
}

.beatrix .ui-dialog-title .atom-arrow-highlight .atom-icon {
    font-size: 32px;
    margin: 10px 0 0 23px;
    color: #fff;
}

.beatrix .ui-dialog-title .atom-arrow-highlight .arrow {
    width: 0;
    height: 300px;
    margin: -150px 0 0 0;
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    border-top: 150px solid #fff;
    border-bottom: 150px solid #fff;
    border-left: 60px solid transparent;
}

.beatrix .ui-dialog-title .atom-arrow-highlight .arrow {
    border-top: 150px solid #611988;
    border-bottom: 150px solid #611988;
}

.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;
}

.beatrix .ui-widget-header {
    background: #7619a5;
    color: #fff;
    border: 0 none;
    padding: 0;
    margin: 0;
    overflow: auto;
    font-weight: normal;
  ...

JavaScript

$(function() {
$( "#dialog" ).dialog({
dialogClass: 'beatrix',
width: 741,
autoOpen: false,
draggable: false,
resizable: false,
title: '<div class="molecule-arrow-icon atom-gradient-purple">'+
	'<div class="atom-arrow-highlight">'+
		'<div class="atom-icon icon-question_mark"></div>'+
		'<div class="arrow"></div>'+
	'</div>'+
	'<h4 class="beatrix-title">Informar Pagamento da Conta</h4>'+
'</div>',
    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();
});
});