JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id="dia" class="foo">
    hello world
</div>

CSS

.ui-dialog,.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

JavaScript

$("#dia").dialog({
    autoOpen: true,
    height: 200,
    width: 300,
    modal: false,
    draggable: true,
    position: [900, 150],
    dialogClass: "foo",
    //show: {effect: 'bounce', duration: 350, times: 3}
    show: {effect: 'fade', duration: 2000}
});

$(".foo .ui-dialog-titlebar").css("display", "none");
$(".foo .ui-dialog-title").css("font-size", "5px");
$(".foo .ui-widget-header").css("display", "none");
$(".foo .ui-widget-content").css("background-color", "#DD3355");
$(".foo .ui-widget-content").css("font-size", "12px");
$(".ui-corner-all").css("background-color", "green");
$(".ui-resizable-n").css("background-image", "none");