JSFiddle - React, Tailwind, and code Playground

HTML

team1 vs team2<br>
team3 vs team4<br>
team5 vs team6<br>
team7 vs team8<br>
<br>
team1 vs team4<br>
team6 vs team8<br>
<br>
team4 vs team8<br>
<br>
team4 winner
<table>
		<thead>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>final</th>
				<th>winner</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="team">team1</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td class="team">team1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team2</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td class="team">team4</td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team3</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td class="team">team4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team4</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td class="team">team4 vinner</td>
			</tr>
			<tr>
				<td class="team">team5</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td class="team">team6</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team6</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td class="team">team8</td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team7</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td class="team">team8</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="team">team8</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>