JSFiddle - React, Tailwind, and code Playground

HTML

<div id="legend">
<table>
<tbody>
<tr>
<td class="swatch" style="background: red;"></td>
<td>alice</td>
<td>123</td>
</tr>
<tr>
<td class="swatch" style="background: orange;"></td>
<td>bob</td>
<td>234</td>
</tr>
<tr>
<td class="swatch" style="background: green;"></td>
<td>carol</td>
<td>345</td>
</tr>
<tr>
<td class="swatch" style="background: blue;"></td>
<td>dan</td>
<td>456</td>
</tr>
</tbody>
</table>
</div>

CSS

.swatch {
	display: inline-block;
	height: 10px;
	width: 10px;
}