JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<table class='horntable'>
<tr><th></th><th>Light</th><th>Muted</th><th>Bright</th><th>Intense</th></tr>
<tr><th>Silver</th>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/111.png);'><div class='hornname'>Silver Light</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/121.png);'><div class='hornname'>Silver Muted</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/131.png);'><div class='hornname'>Silver Bright</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/141.png);'><div class='hornname'>Silver Intense</div></td>
</tr><tr><th>Gold</th>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/211.png);'><div class='hornname'>Gold Light</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/221.png);'><div class='hornname'>Gold Muted</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/2311.png);'><div class='hornname'>Gold Bright</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/241.png);'><div class='hornname'>Gold Intense</div></td>
</tr><tr><th>Copper</th>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/311.png);'><div class='hornname'>Copper Light</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/321.png);'><div class='hornname'>Copper Muted</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/331.png);'><div class='hornname'>Copper Bright</div></td>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/341.png);'><div class='hornname'>Copper Intense</div></td>
</tr><tr><th>Onyx</th>
<td style='background-image:url(http://griffusion.elementfx.com/pics/newart/pattern/441.png);'><div...

CSS

.horntable {border:none; border-spacing:5px;margin:auto;text-align:center;}
.horntable td {width:180px;height:120px;text-align:center;border:1px solid grey;border-radius:5px;padding:5px;position:relative;}
.hornname {width:160px;background-color:white;text-align:center;padding:5px;border-radius:5px;position:absolute;bottom:5px;}