JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
<tbody>
<tr>				
	<td align="center" colspan="2">BCD</td>
	<td align="center" colspan="2">CDE</td>
	<td align="center" colspan="2">DEF</td>						
	<td align="center">ABC</td>
</tr>
<tr>				
	<td align="center" style="height:36px; background-color: blue; color:white;">1</td>
	<td align="center" align="center" style="height:36px; background-color: blue; color:white;">2</td>
	<td align="center" style="height:36px; background-color: blue; color:white;">3</td>
	<td align="center" style="height:36px; background-color: green; color:white;">4</td>
	<td align="center" style="height:36px; background-color: green; color:white;">5</td>	
	<td align="center" style="height:36px; background-color: green; color:white;">6</td>						
</tr>

<tr>
	<td align="center" style="height:36px; background-color: silver; color:white;">7</td>
	<td align="center" style="height:36px; background-color: silver; color:white;">8</td>
	<td align="center" style="height:36px; background-color: silver; color:white;">9</td>	
	<td align="center" style="height:36px; background-color: red; color:white;">10</td>
	<td align="center" style="height:36px; background-color: red; color:white;">11</td>
	<td align="center" style="height:36px; background-color: red; color:white;">12</td>						
</tr>
</tbody>
</table>