JSFiddle - React, Tailwind, and code Playground

HTML

<div class="datagrid"><table>';
<thead><tr><th colspan="2">header</th><th>header</th><th>header</th></tr></thead>
				<tfoot><tr><td colspan="4"><div id="no-paging">&nbsp;</div></tr></tfoot>
				<tbody><tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
				</tbody>
				</table></div>

CSS

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #5492A2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 10px 0px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #288096), color-stop(1, #288096) );background:-moz-linear-gradient( center top, #288096 5%, #288096 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#288096', endColorstr='#288096');background-color:#288096; color:#FFFFFF; font-size: 18px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #D4D2D2; border-left: 1px solid #D4D2D2;font-size: 16px;border-bottom: 1px solid #E1EEF4;font-weight: normal; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #5492A2;background: #FFFFFF;} .datagrid table tfoot td { padding: 0; font-size: 18px } .datagrid table tfoot td div{ padding: 0px; }