JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<input id=myModal type="button" value="clic here">

CSS

.ui-dialog-titlebar-close { 
/* remove default close jUi */
position:relative; 
background:0;
border:0;
float:right;
z-index:1;
} 
.ui-dialog-titlebar-close:after {
 position:relative;
top:5;
font-family: FontAwesome;
font-size: 1.0em;
content: "\f28b"; 
z-index:2;
}

JavaScript

$('#myModal').on('click', function() {

$(this).dialog({
		width:500,
		resizable: false,
		modal:true,
		title: 'My modal',
    closeText: '',
		show:{effect:'scale', duration: 300},
		hide:{effect:'explode', duration: 300}
    });
    
   });