JSFiddle - React, Tailwind, and code Playground
HTML
<table class="bracket">
<colgroup>
<col class="larger"/>
<col class="larger"/>
</colgroup>
<thead>
<tr><th colspan="2">Choose Your Entry Type</th></tr>
</thead>
<tbody>
<tr><td><button id="entry_0" onclick="pick_entry(0);" class="btn btn_wide">Fun Entry</button></td>
<td><button id="entry_1" onclick="pick_entry(1);" class="btn btn_wide selected">Official Entry</button></td>
<tr><td><ul><li>Open to everybody</li>
<li>Just for fun, no prizes awarded</li>
<li>If you have multiple accounts, you can try a few different brackets (but don't go crazy, and don't make the same picks every time)</li>
<li>Top entries will show up on the leaderboards, but you can't win a prize unless it's an Official Entry.</li></ul></td>
<td><ul><li>Open to US and Canadian residents</li>
<li><b>One</b> entry per household</li>
<li>Winning brackets are eligible for prizes</li>
<li>Requires your real name and address to be correct on your <a href="/user/private">private profile</a></li>
<li>Make sure you read the official <a href="/features/bge20">contest description</a> and <a href="/features/bge20_rules">contest rules</a></li>
</ul></td></tr>
<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="2857142" /><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...