JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile r0 c0">0,0</div>
<div class="tile r0 c1">0,1</div>
<div class="tile r0 c2">0,2</div>

<div class="tile r1 c0">1,0</div>
<div class="tile r1 c1">1,1</div>
<div class="tile r1 c2">1,2</div>

<div class="tile r2 c0">2,0</div>
<div class="tile r2 c1">2,1</div>
<div class="tile r2 c2">2,2</div>

CSS

.tile
{
    position: absolute;
    background: url(http://i.stack.imgur.com/vbjyR.png);
    width: 47px;
    height: 24px;
    top: 0px;
    left: 0px;
    
    text-align: center;
}

.test
{
    width: 47px;
    height: 24px;
    top: 0px;
    left: 0px;
}

.test:hover 
{
    border: 1px solid #c4c4c5;
}

.tile.r0
{
    top: +0px;
}

.tile.r1
{
    top: +12px;
    margin-left: 24px;
}

.tile.r2
{
    top: +24px;
}

.tile.c0
{
    left: +0px;
}

.tile.c1
{
    left: +48px;
}

.tile.c2
{
    left: +96px;
}