JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<div id="dialog-message">     
    <p>        
      A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.
    </p>     
   
</div>

JavaScript

$( "#dialog:ui-dialog" ).dialog( "destroy" );              
$( "#dialog-message" ).dialog({            
    modal: true, 
    title: "Caixa de Diálogo com Modal",    
    buttons: {                
        Ok: function() {                     
            $( this ).dialog( "close" );                
        }             
    }         
});