JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">My dialog</div>
<a href="#" id="open">Open dialog</a>

CSS

.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
	overflow:visible;
}
.ui-dialog .ui-dialog-titlebar {
    background:transparent;
    border:none;
}
.ui-dialog .ui-dialog-title {
	display:none;
}
.ui-dialog .ui-dialog-titlebar-close {
    right:0;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}

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

.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}

.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}

JavaScript

$('#open').click(function() {
    $('#dialog').dialog('open');
});

$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        resizable: true,
        width: 300,
        height: 'auto',
        buttons: {
            "Save": function () {
                        
            }
        }
    });
});