JSFiddle - React, Tailwind, and code Playground
HTML
<table class="demoTable"><tr><td>
<tr><td colspan="4"><center><div style="height:100px;width:100px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png')"></div></center></td></tr>
<tr>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:0px 0px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-50px 0px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:0px -50px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-50px -50px;"></div>
</td>
</tr>
<tr>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:25px 25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-25px 25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:25px -25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-25px -25px;"></div>
</td>
</tr>
</table>
CSS
.da-center {margin: 0 auto;}?a.myLink
{
display:block;
background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');
width: 50px;
height: 50px;
}
a.myLink:hover
{
background-position:-50px -50px;
}
.demoTable td
{
padding:0px 10px 10px 10px;
}