JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<div id="bracket">
<div id="LB">
    <div id="regionM">
        <ul class="round64">
            <li>
                <time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time>
                <select disabled="disabled" data-round="64" data-team="M01">
                    <option value="M01">&ensp;1&emsp;Louisville</option>
                </select>
                <select data-round="64" data-team="M16">
                    <option value="0"></option>
                    <option value="M16a">16&emsp;North Carolina A&amp;T</option>
                    <option value="M16b">16&emsp;Liberty</option>
                </select>
            </li>
            <li>
                <time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time>
                <select disabled="disabled" data-round="64" data-team="M08">
                    <option value="M08">&ensp;8&emsp;Colorado State</option>
                </select>
                <select disabled="disabled" data-round="64" data-team="M09">
                    <option value="M09">&ensp;9&emsp;Missouri</option>
                </select>
            </li>
            <li>
                <time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time>
                <select disabled="disabled" data-round="64" data-team="M05">
                    <option value="M05">&ensp;5&emsp;Oklahoma State</option>
                </select>
                <select disabled="disabled" data-round="64" data-team="M12">
                    <option value="M12">12&emsp;Oregon</option>
                </select>
            </li>
            <li>
                <time datetime="2013-03-21T23:30:00-06:00">03/21 5:30pm</time>
                <select disabled="disabled" data-round="64" data-team="M04">
                    <option value="M04">&ensp;4&emsp;Saint Louis</option>
                </select>
                <select disabled="disabled" data-round="64" data-team="M13">
                    <option value="M13">13&emsp;New Mexico...

CSS

html, body {
    height: 100%;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}
#bracket {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0.625em solid transparent;
}
#LB, #RB, #FF, #FF ul {
    display: inline-block;
    height: 100%;
}
#FF {
    width: 28%;
    height: 50%;
    position: relative;
    top: -25%;
    padding: 0.5em 0;
    margin-bottom: -0.5em;
}
#LB, #RB {
    width: 36%;
}
div[id^="region"] {
    height: 50%;
}
#LB ul[class^="round"] {float: left;}
#RB ul[class^="round"] {float: right;}
div[id^="region"] ul { width: 25%; }
#FF ul { width: 30%; }
#FF ul.finals { width: 40%; }
ul[class^="round"] { height: 100%; }
ul[class^="round"] li {
    position: relative;

    padding: 0.5em 0; 
}
ul[class^="round"] div {
    margin: -0.5em 0;
}
ul[class^="round"] div:first-child {
    margin-bottom: 0;
}

ul.round64 li { height: 12.5%; padding: 0;}
ul.round32 div:first-child { height: 6.25%; }
ul.round32 li, ul.round32 div, ul.round16 div:first-child { height: 12.5%; }
ul.round16 li, ul.round16 div, ul.round08 div:first-child { height: 25%; }
ul.round08 li { height: 50%; }
ul.round04 li { height: 100%; padding: -1em 0 !important;}
ul.round02 { width: 30%; }
ul.round01 { width: 40%; }

div[id^="region"] ul[class^="round"] li select:first-of-type { top: 0; }
div[id^="region"] ul[class^="round"] li select:last-of-type { bottom: 0; }
ul.round04 li select:first-of-type { top: 0; }
ul.round04 li select:last-of-type { bottom: 0; }
ul[class^="round"] li time { top: -1.125em; position: absolute; font-size: 0.625em; width:100%;}
ul.round64 li select, ul.round64 li time { top: 50% !important; }
ul.round64 li select:first-of-type { margin-top: -1.5em; }
ul.round64 li time { margin-top: -3.125em; }

#LB ul[class^="round"] li, ul.round04.left li { border-right: 0.125em solid #CCC; }
#RB ul[class^="round"] li, ul.round04.right li { border-left: 0.125em solid...

JavaScript

var PREV;
$('select[data-round]').focus(function () {
    PREV = $(this).val();
});
$('select[data-round]').change(function () {
    var team = $(this).val();
    var round = $(this).attr('data-round');
    $('select[data-round]:has(option[value=' + team + '])').filter(function () {
        return $(this).attr("data-round") > round && team != "0";
    }).attr("data-team", team).val(team);
    $(this).attr("data-team", team);
    $('select[data-round]:has(option[value=' + PREV + ']:selected)').filter(function () {
        return $(this).attr("data-round") < round;
    }).attr("data-team", "0").val("0");
});