JSFiddle - React, Tailwind, and code Playground

HTML

<tr><td><b>Enter Your Tiebreaker:</b><br />
	How many <b>total</b> votes will be cast through all 127 battles?</td>
    <td><input type="text" id="tiebreaker" name="tiebreaker" size="10" maxlength="10" value="5000000" /><button onclick="pick_tiebreaker();" class="btn">Update Tiebreaker</button><span id="tie_updated"></span></td></tr>
<tr><td colspan="2">Javascript is required to fill out the bracket. Your entry is automatically updated with each pick. Click the <i class="icon icon-question-sign"></i> next to each game for more information. <b>You have picked <span id="count">127</span> of 127 battles.</b></td>
</tbody>    
</table>

<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><th colspan="4">Division I</td></tr>

<tr>
    <td>
	<i id="game_1" class="icon icon-question-sign" onclick="show_game_info(1);"></i> (1) <span id="b1-1" title="Chrono Trigger" class="picked"><a onclick="pick( 1, 1)">Chrono Trigger</a></span><br>
	<i id="game_2" class="icon icon-question-sign" onclick="show_game_info(2);"></i> (16) <span id="b1-2" title="Ratchet & Clank: Up Your Arsenal" class="not_picked"><a onclick="pick( 1, 2)">Ratchet & Clank 3</a></span><br>
    </td>

    <td rowspan="2">
	<span id="b65-1"  class="picked"><a onclick="pick( 65, 1)">Chrono Trigger</a></span><br>
	<span id="b65-2"  class="not_picked"><a onclick="pick( 65, 4)">Persona 3</a></span><br>
    </td>

    <td rowspan="4">
	<span id="b97-1" class="not_picked"><a onclick="pick( 97, 1)">Chrono Trigger</a></span><br>
	<span id="b97-2" class="picked"><a onclick="pick( 97, 7)">Final Fantasy X</a></span><br>
    </td>

    <td rowspan="8">
	<span id="b113-1" class="not_picked"><a onclick="pick( 113, 7)">Final Fantasy X</a></span><br>
	<span id="b113-2" class="picked"><a onclick="pick( 113, 9)">Smash Bros....