JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <div id="content">
<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></div>
 
<button onclick="dialogtrigger();" id="opener">Open Dialog</button>
 <div id="clientdetailmodal"></div>
 
</body>
<script>var dialogtrigger=null;</script>
</html>

JavaScript

$(function() {
      dialogtrigger = function (){
          //replace with your ajax call
          $("#clientdetailmodal").html($('#content')).dialog({
              autoOpen: false, modal: true, show: {
                  effect: "blind",
                  duration: 500
              }
          });      
      }
 
    $( "#opener" ).click(function() {
      $( "#clientdetailmodal" ).dialog( "open" );
    });
  });