JSFiddle - React, Tailwind, and code Playground

by simpleorchid

HTML

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

.ui-dialog::before, .ui-dialog::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    
    border-style: solid;
    border-width: 10px;
}

.ui-dialog::before {
    border-color: #aaa transparent transparent transparent;
    right: -21px;
}

.ui-dialog::after {
    border-color: #fff transparent transparent transparent;
    right: -20px;
}

.ui-dialog {
    overflow:visible;
}

JavaScript

$('#dialog').dialog({resizable:false});