JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
<tbody>
<tr>
<td>State name</td>
<td>Utility co</td>
<td>Data for 1</td>
<td>Data for 2</td>
<td>Data for 3</td>
</tr>
<tr>
<td>State name</td>
<td>Utility co</td>
<td>Data for 1</td>
<td>Data for 2</td>
<td>Data for 3</td>
</tr>
<tr>
<td>State name</td>
<td>Utility co</td>
<td>Data for 1</td>
<td>Data for 2</td>
<td>Data for 3</td>
</tr>
<tr>
<td>State name</td>
<td>Utility co</td>
<td>Data for 1</td>
<td>Data for 2</td>
<td>Data for 3</td>
</tr>
<tr>
<td>State name</td>
<td>Utility co</td>
<td>Data for 1</td>
<td>Data for 2</td>
<td>Data for 3</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
}
td, th {
border: 1px solid Black;
padding: 5px 15px;
}
thead > tr:nth-child(1) > th:nth-child(1) { background-color: Orchid; }
thead > tr:nth-child(1) > th:nth-child(2) { background-color: YellowGreen; }
thead > tr:nth-child(1) > th:nth-child(3) { background-color: Orange; }
thead > tr:nth-child(2) > th { background-color: Gold; }