JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body><table>
    <tr>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <div class="smallblock i0"></div>
                    <div class="smallblock i2"></div>
                    <div class="smallblock i3"></div>
                    <div class="smallblock i6"></div>
                    <div class="smallblock i7"></div>
                    <div class="smallblock i8"></div>
                </div>
            </div>
        </td>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <div class="smallblock i0"></div>
                    <div class="smallblock i1"></div>
                    <div class="smallblock i3"></div>
                    <div class="smallblock i4"></div>
                    <div class="smallblock i6"></div>
                    <div class="smallblock i8"></div>
                </div>
            </div>
        </td>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <div class="smallblock i0"></div>
                    <div class="smallblock i1"></div>
                    <div class="smallblock i2"></div>
                    <div class="smallblock i5"></div>
                    <div class="smallblock i8"></div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <span>some text</span>
            <div class="hover">
                <div class="img">
                    <div class="smallblock i0"></div>
                    <div class="smallblock i2"></div>
                    <div class="smallblock i3"></div>
                    <div...

CSS

table {
    width:450px;
}
td {
    background:grey;
    text-align:center;
    vertical-align:middle;
    position:relative;
    height:150px;
    width:150px;
    overflow:hidden;
}
div.hover {
    height:150px;
    position:absolute;
    top:0px;
    width:150px;
}
div.hover:hover {
    cursor:pointer;
}
.smallblock {
    background-color:pink;
    height:50px;
    width:50px;
    display:none;
}
div.hover {
    border: 2px green solid;
}

div.hover:hover .smallblock {
    display:block;
}
.i0,.i1,.i2,.i3,.i4,.i5,.i6,.i7,.i8 {
    position:absolute;
}
.i0,.i1,.i2 {
    top:0px
}
.i3,.i4,.i5 {
    top:50px
}
.i6,.i7,.i8 {
    top:100px
}
.i0,.i3,.i6 {
    left:0px
}
.i1,.i4,.i7 {
    left:50px
}
.i2,.i5,.i8 {
    left:100px
}