JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
    
<table>
    <tr>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td>LONG_DATA</td>
        <td><button id="opener">Open Dialog</button></td>
    </tr>
</table>
    <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>

JavaScript

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });