JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<canvas id="canvas"></canvas>

<div class="region">
    
    <h2 class="region-name">South Region</h2>

    <section class="round">
        
        <article class="game">
            <div class="team team-winner team-florida" data-team="florida">
                <span class="team-seed">1</span>
                <span class="team-name">Florida</span>
                <span class="team-score">67</span>
            </div>
            
            <div class="team team-loser team-ua-ms-mary" data-team="ua-ms-mary">
                <span class="team-seed">16</span>
                <span class="team-name">UA / MS Mary</span>
                <span class="team-score">55</span>
            </div>
        </article>
        
        <article class="game">
            <div class="team team-loser team-colorado" data-team="colorado">
                <span class="team-seed">8</span>
                <span class="team-name">Colorado</span>
                <span class="team-score">48</span>
            </div>
            
            <div class="team team-winner team-pitt" data-team="pitt">
                <span class="team-seed">9</span>
                <span class="team-name">Pitt</span>
                <span class="team-score">77</span>
            </div>
        </article>
        
        <article class="game">
            <div class="team team-winner team-ucla" data-team="ucla">
                <span class="team-seed">4</span>
                <span class="team-name">UCLA</span>
                <span class="team-score">76</span>
            </div>
            
            <div class="team team-loser team-tulsa" data-team="tulsa">
                <span class="team-seed">13</span>
                <span class="team-name">Tulsa</span>
                <span class="team-score">59</span>
            </div>
        </article>
        
        <article class="game">
            <div class="team team-loser team-vcu"...

SCSS

$font-stack: proxima-nova, proxima-nova-1, proxima-nova-2, "Proxima Nova", arial, helvetica, sans-serif;
body {
    background: #F2F2F2;
    margin: 0;
}
* { box-sizing: border-box; }
body, html { height: 100%; width: 100%; }
#canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.region {
    height: 100%;
    position: relative;
    z-index: 1;
    
    .region-name {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 0;
        margin: -18px 0 0;
        padding: 0;
        font: 600 30px $font-stack;
    }
}

.round {
    font: 300 15px $font-stack;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding: 0 20px;
    float: left;
    width: 33.3333333333%;
    position: relative;
    z-index: 2;
    pointer-events: none;
    
    &.round-collapse {
        margin-left: -16.666666666%;
    }
    
    .game {
        background: #FFF;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        max-height: 80px;
        pointer-events: auto;
        
        .team {
            display: flex;
            align-items: center;
            flex: 1 1 40px;
            cursor: pointer;
            border-left: 10px solid #DDD;
            transition: .2s;
            /* keep this for smoother transitions: */
            box-shadow: inset 0 40px 0 rgba(255, 255, 255, 0);

            .team-seed {
                font-size: 10px;
                color: #999;
                flex: 0 1 30px;
                text-align: center;
                transition: .2s;
            }
            .team-name {
                flex: 1 1 auto;
                white-space: nowrap;           
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .team-score {
                font-weight: 600;
  ...

JavaScript

var Tournament = function() {
    var defaults = {
        width: 3,
        color: '#BBB',
        radius: 15,
        regionSelector: '.region'
    };
    
    return {
        init: function(options) {
            this.options = $.extend(defaults, options);
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            
            this.bindEvents();
            this.render();
        },
        
        bindEvents: function() {
            $(window).on('resize', this.render.bind(this));
            
            $('.team').on({
                mouseenter: function(e) {
                    $('.team-' + $(this).attr('data-team'))
                        .addClass('team-hover')
                        .css('background', $(this).css('border-left-color'));
                },
                mouseleave: function(e) {
                    $('.team-' + $(this).attr('data-team'))
                        .removeClass('team-hover')
                        .css('background', '');
                }
            });
        },
        
        render: function() {
            var w = $(document).width();
            var h = $(document).height();
            this.canvas.width  = w * 2; // retina
            this.canvas.height = h * 2; // retina
            this.canvas.style.width  = w + 'px';
            this.canvas.style.height = h + 'px';
            this.ctx.clearRect( 0, 0, this.canvas.width, this.canvas.height );
            this.ctx.scale(2, 2); // retina
            
            var that = this;
            
            $(this.options.regionSelector).each(function() {
                var rightAlign = $(this).hasClass('region-right');
                
                $(this).find('.round').each(function(round) {
                    var $nextGames = $(this).next('.round').find('.game');
                    if (!$nextGames.length) return;
                    
                   ...