JSFiddle - React, Tailwind, and code Playground

by theberengersniper

HTML

<table class="grid">
<tr><td>Heading 1</td><td>Heading 2</td><td>Heading 3</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td></tr>
</table>

CSS

.grid {
	font-family: segoe ui, calibri, arial, sans-serif;
	font-size: 12px;
	color: #5B636B;
	border: 1px solid #CCC;
	border-collapse: separate;
    border-spacing: 5px 0px;
	background-color: #FFF;
}

.grid tr {
	height: 30px;
	border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
	border: none;
	background-color: #ECEEF4;
}

.grid tr:last-child {
	border: none;
}

.grid td {
	padding: 0px 5px 0px 5px;
	/*border-right: 3px solid #FFF;*/
}