JSFiddle - React, Tailwind, and code Playground

HTML

<table id="fixures" style="width:740px" class="left" border="0" cellspacing="0" cellpadding="7">
	<tbody>
		<tr><td>first row</td></tr>
		<tr><td>second row</td></tr>
		<tr><td>third row</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="past"><td>past rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
		<tr class="future"><td>future rows</td></tr>
	</tbody>
</table>

CSS

tbody > .future {
    background: red;
}

tbody > .future ~ .future {
    background: none;
}