JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<p>Some text</p>

<div id="dialog" title="Basic dialog" style="display:none;"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>

<p>Some text 2</p>

<script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "explode",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }  
    });
    
    setTimeout(function(){
        $( "#dialog" ).dialog( "open" );
    }, 3000)
  });
 </script>