JSFiddle - React, Tailwind, and code Playground
HTML
<style>
table.bracket td {border: 1px solid #888888; vertical-align: middle; position: inherit }
table.bracket td.fl {border-right: 0}
table.bracket td.fr {border-left: 0}
.complete {background-color: #e0f0f0 !important}
.incomplete {background-color: #e8e8e8 !important}
.cbx_char { display: block; width: 250px; height: auto; background: lightblue; padding: 5px; height: 90px; color: black; box-shadow: black 0 1px 0, black 0 2px 2px; border: 1px black solid; border-radius: 2px; }
.cbx_char_img { display: block; margin: 0; padding: 2px; width: 75px; height: 75px; float: left; }
.cbx_char_img img { border: 1px solid black; }
.cbx_char_profile { display: block; margin: 0; padding: 2px; width: 200x; height: 80px; overflow: auto; }
.cbx_char_name { font-size: 14px; text-align: center; text-decoration: underline; font-weight: bold; display: block; }
.cbx_char_desc { font-size: 10px; clear: left; display: block; overflow: hidden; text-overflow: ellipsis; }
.battle_info { font-size: 9px; display: block; }
.charbox .ui-dialog-titlebar { height: 0; }
.charbox .ui-dialog-titlebar-close { position: absolute; right: 7px; bottom: 5px; }
</style>
<div class="body">
<p></p>
<table class="bracket">
<colgroup>
<col class="larger"/>
<col class="larger"/>
</colgroup>
<thead>
<tr><th colspan="2">Quick Contest Changes and Notes</th></tr>
</thead>
<tr><td colspan="2">
<ul>
<li>Battles begin at <b>midnight UTC</b> (5PM Pacific Daylight, 4PM Pacific Standard) October 19 through December 14, with a 6-day Thanksgiving Holiday break</li>
<li>Registered user votes count <b>double</b> that of anonymous votes this year</li>
<li>The eight "Legends" characters don't enter the bracket until after the division finals</li>
<li>After the divisional rounds, the final sixteen characters will be in a <b>double elimination</b> tournament</li>
<li>Due to the size and complexity of the bracket (especially the double elimination...