JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="dialog">Content 11</td>
        <td class="dialog">Content 21</td>
    </tr>
    <tr>
        <td class="dialog">Content 12</td>
        <td class="dialog">Content 22</td>
    </tr>
    <tr>
        <td class="dialog">Content 13</td>
        <td class="dialog">Content 23</td>
    </tr>
    <tr>
        <td class="dialog">Content 14</td>
        <td class="dialog">Content 24</td>
    </tr>
</table>

<div id="dialog" class="ui-dialog">
    <div class="ui-dialog-titlebar">
        <div class="ui-dialog-title"></div>
        <div class="ui-dialog-titlebar-close"></div>
    </div>
    <div class="ui-dialog-content"></div>
</div>

CSS

#dialog {
    display: none;
}

JavaScript

$(".dialog").click(function () {
    var $cell = $(this);
    $('#dialog').dialog({
        resizable: true,
        modal: true,
        open: function () {
            $(this).find('.ui-dialog-content').html($cell.html());
        }
    });
});