JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div style="width:300px;height:250px;border:1px solid black; overflow:hidden;">

<table style="border:1px solid blue; margin:2px; float:left; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:right; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:left; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:right; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:left; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:right; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:left; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>

<table style="border:1px solid blue; margin:2px; float:right; overflow:hidden;" width="146px" height="90px">

<tbody>
<tr style=""> 
      <td style="" ><a href="#"></a></td>

</tr>
</tbody>




</table>
</div>
<div class="overlap" style="">
test
</div>


</body>

CSS

body {

}


table{
background-color:00ff00;
}

table:hover{
background-color:blue;
}

table tr td a {
    display:block;
    height:100%;
    width:100%;
}


div {
    width:298px;
    height: 62px;
	position:relative;
}

.overlap {
    background-color:red; top:-65px; margin:2px; display:block;
}
.overlap:hover{
    top:-160px;
    padding-top:95px;
}