JSFiddle - React, Tailwind, and code Playground

HTML

<table class="bracket">
<colgroup>
		<col class="large"/>
		<col class="medlarge"/>
		<col class="medlarge"/>
		<col class="medlarge"/>
</colgroup>
<thead>
<tr><th>Round 1</th><th>Round 2</th><th>Round 3</th><th>Div Final</th></tr>
</thead>
<tbody>

<tr><td colspan="4" class="divh">Division I</td></tr>

<tr>
    <td>
	(1) <span id="b1-1" class="picked">Chrono Trigger</span><br>
	(16) <span id="b1-2" class="not_picked">Ratchet & Clank 3</span><br>
    </td>

    <td rowspan="2">
	<span id="b65-1"  class="picked">Chrono Trigger</span><br>
	<span id="b65-2"  class="not_picked">Persona 3</span><br>
    </td>

    <td rowspan="4">
	<span id="b97-1" class="not_picked">Chrono Trigger</span><br>
	<span id="b97-2" class="picked">Final Fantasy X</span><br>
    </td>

    <td rowspan="8">
	<span id="b113-1" class="not_picked">Final Fantasy X</span><br>
	<span id="b113-2" class="picked">Smash Bros. Melee</span><br>
    </td>
</tr>

<tr>
    <td>
	(8) <span id="b2-1" class="not_picked">Dragon Quest VIII</span><br>
	(9) <span id="b2-2" class="picked">Persona 3</span><br>
    </td>

</tr>

<tr>
    <td>
	(5) <span id="b3-1" class="not_picked">Batman: Arkham City</span><br>
	(12) <span id="b3-2" class="picked">Mega Man X</span><br>
    </td>

    <td rowspan="2">
	<span id="b66-1" class="not_picked">Mega Man X</span><br>
	<span id="b66-2" class="picked">Final Fantasy X</span><br>
    </td>
</tr>

<tr>
    <td>
	(4) <span id="b4-1" class="picked">Final Fantasy X</span><br>
	(13) <span id="b4-2" class="not_picked">Half-Life</span><br>
    </td>
</tr>

<tr>
    <td>
	(3) <span id="b5-1" class="picked">Smash Bros. Melee</span><br>
	(14) <span id="b5-2" class="not_picked">Portal</span><br>
    </td>

    <td rowspan="2">
	<span id="b67-1" class="picked">Smash Bros. Melee</span><br>
	<span id="b67-2" class="not_picked">Pokemon Gold/Silver</span><br>
    </td>

    <td rowspan="4">
	<span id="b98-1" class="picked">Smash Bros. Melee</span><br>
	<span id="b98-2"...