JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<table>
<tr>
<td><div class="green"></div>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><div class="orange"></div>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td><div class="red"></div>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>

CSS

.container {
    position: relative;
    display: inline-block;
}
table {
    border-collapse: collapse;
    width: 130px;
}
tr {height: 30px;}
td {border: 1px solid black;}
.green, .orange, .red {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.green {
    background: url('http://img717.imageshack.us/img717/7747/greenh.png') no-repeat left top;
    top: 0;
}
.orange {
    background: url('http://img266.imageshack.us/img266/6905/orangeh.png') no-repeat left top;
    top: 30px;
}
.red {
    background: url('http://img709.imageshack.us/img709/6843/redkq.png') no-repeat left top;
    top: 60px;
}