JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://gist.github.com/raw/3312762/586a815d210d7364c740d86bc8c43bf8db40598f/css/custom-theme/jquery-ui-1.8.22.custom.css">
<script src="https://gist.github.com/raw/3312762/e36a7f0f6cc3065c6afdc28693a1664564c3c13f/js/jquery-ui-1.8.22.custom.min.js"></script>
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
CSS
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
JavaScript
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600
});
$('#dialog').dialog('option', 'buttons', [
{
"text": "Ok",
"click": function() {
$(this).dialog("close");
}
},
{
"text": "Cancel",
"click": function() {
$(this).dialog("close");
}
}
]);
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});