JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog" title="Basic dialog">
              <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
            </div>
 
            <button id="opener">Open Dialog</button>

CSS

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

JavaScript

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
            <script>
              $(function() {
                $( "#dialog" ).dialog({
                  autoOpen: false,
                  show: {
                    effect: "blind",
                    duration: 1000
                  },
                  hide: {
                    effect: "explode",
                    duration: 1000
                  }
                });
             
                $( "#opener" ).click(function() {
                  $( "#dialog" ).dialog( "open" );
                });
              });
            </script>