JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td >www.wikipedia.com</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">www.google.com</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<iframe class="stuff">
</iframe>

CSS

td {
    padding: 10px;
    border: 1px solid black;
}

.stuff {
    display: none;
    margin-top: 20px;
    min-height: 300px;
    min-width: 300px;
    background-color: #BBB;
}

JavaScript

var html = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
 var iframe = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';
        
var contents = "";
$('td').on('mouseenter', function(e) {
console.log('enter');
    contents = $(this).html();
    console.log(contents);
    if (contents.match("^www")) {
        $(this).html(iframe);
        $(this).find('iframe').attr('src',"http://"+contents).show();
    }}).on('mouseleave', function(e) {
console.log('leave', this, contents);
     $(this).html(contents);
});