JSFiddle - React, Tailwind, and code Playground

by Marcus Campos

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;
  border-bottom: 1px solid #e5e5e5;
  background-color: #7619a5;
  background:...

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",
       at: "center",
       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();
   });
 });