JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="page-title">Character Battle X - My Bracket</h1>
</header><link href="/css_wide/cbx.20181015205234.css" rel="stylesheet" type="text/css">

<div class="body">


Your Tiebreaker: 250000<br />


<table class="bracket">
<colgroup>
		<col class="large"/>
		<col class="medlarge"/>
		<col class="medlarge"/>
		<col class="medlarge"/>
</colgroup>
<thead>
<tr><th>Round 1 (1 Point)</th><th>Round 2 (2)</th><th>Round 3 (4)</th><th>Div Final (8)</th></tr>
</thead>
<tbody>
<tr><th colspan="4">Division 1</td></tr>


<tr>
    <td id="battle_1" class="complete">
    <span class="battle_info">Battle 1</span>
	<i id="char_1" class="fa fa-question-circle" onclick="show_char_info(1);"></i> (1) <span id="b1-1" title="Dante" class="picked">Dante</a></span><br>
	<i id="char_2" class="fa fa-question-circle" onclick="show_char_info(2);"></i> (16) <span id="b1-2" title="Cuphead" class="not_picked">Cuphead</a></span><br>
    </td>

    <td rowspan="2" id="battle_65" class="complete">
    <span class="battle_info">Battle 65</span>
	<span id="b65-1"  class="picked">Dante</a></span><br>
	<span id="b65-2"  class="not_picked">Lightning</a></span><br>
    </td>

    <td rowspan="4" id="battle_97" class="complete">
    <span class="battle_info">Battle 97</span>
	<span id="b97-1" class="picked">Dante</a></span><br>
	<span id="b97-2" class="not_picked">Ganondorf</a></span><br>
    </td>

    <td rowspan="8" id="battle_113" class="complete">
    <span class="battle_info">Battle 113</span>
	<span id="b113-1" class="not_picked">Dante</a></span><br>
	<span id="b113-2" class="picked">Vivi</a></span><br>
    </td>
</tr>

<tr>
    <td id="battle_2" class="complete">
    <span class="battle_info">Battle 2</span>
	<i id="char_3" class="fa fa-question-circle" onclick="show_char_info(3);"></i> (8) <span id="b2-1" title="Chloe Price" class="not_picked">Chloe Price</a></span><br>
	<i id="char_4" class="fa fa-question-circle" onclick="show_char_info(4);"></i> (9) <span id="b2-2" title="Lightning"...