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><th colspan="4">Division I</th></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 &amp; Clank: Up Your Arsenal" class="not_picked"><a onclick="pick( 1, 2)">Ratchet &amp; 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. Melee</a></span><br>
    </td>
</tr>

<tr>
    <td>
    <i id="game_3" class="icon icon-question-sign" onclick="show_game_info(3);"></i> (8) <span id="b2-1" title="Dragon Quest VIII: Journey of the Cursed King" class="not_picked"><a onclick="pick( 2, 3)">Dragon Quest VIII</a></span><br>
    <i id="game_4" class="icon icon-question-sign" onclick="show_game_info(4);"></i> (9) <span id="b2-2" title="Shin Megami Tensei: Persona 3" class="picked"><a onclick="pick( 2, 4)">Persona 3</a></span><br>
    </td>

</tr>

<tr>
    <td>
    <i id="game_5" class="icon icon-question-sign"...