JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
  	<div id="testBracket"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

* {
  padding: 0px;
  margin: 0px;
}

body {
  background: url("bg.jpg") no-repeat center center fixed;
  background-size: 100vw 100vh;
}

#body {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 100vw;
  height: 1500px;
  background-color: rgba(238, 238, 238, 0.4);
}

.BrackChart_wrapper {
  position: relative;
  /* ^ This makes children positions relative to self */
  top: 0px;
  left: 0px;
  font-family: "Open Sans";
}

.BrackChart_match {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  height: auto;
}

.BrackChart_line {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #bbb;
  background-color: rgba(238, 238, 238, 0.5);
}

.BrackChart_team {
  height: 45px;
}

.BrackChart_info {
  height: 41px;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-1px);
}

.BrackChart_winner {
  //color: #4caf50;
}

.BrackChart_loser {
  //color: #ff1744;
}

.BrackChart_flag {
  display: inline-block;
  width: 50px;
  height: 45px;
  vertical-align: middle;
  transform: translateY(-3px);
}

.BrackChart_teamName {
  display: inline-block;
  width: 100px;
  height: 45px;
  padding-left: 20px;
  font-size: 18px;
  text-align: left;
  line-height: 45px;
  font-weight: 300;
}

.BrackChart_teamScore {
  display: inline-block;
  width: 38px;
  height: 45px;
  color: black;
  text-align: right;
  font-size: 14px;
  padding-right: 20px;
  line-height: 45px;
  font-weight: 600;
}

.BrackChart_time {
  display: inline-block;
  width: 50px;
  height: 39px;
  text-align: center;
  line-height: 41px;
  background-color: #444;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  color: white;
}

.BrackChart_date {
  display: inline-block;
  width: 65px;
  height: 39px;
  margin-left: 5px;
  padding-left: 15px;
 ...

JavaScript

/* global variables */

var BrackChart_gl_WIDTH = 230;
var BrackChart_gl_HEIGHT = 130;
var BrackChart_gl_XSPACING = 60;
var BrackChart_gl_YSPACING = 30;
var BrackChart_gl_LINEW = 1;
var BrackChart_gl_WRAPPERPADDING = true;





/* BrackChart.js */

function BrackChart(data, selector)
{
  this.rounds = this.createRounds(data);
  this.element = document.querySelector(selector);
  this.element.classList.add("BrackChart_wrapper");

  if (BrackChart_gl_WRAPPERPADDING)
  {
    this.element.style.marginLeft = BrackChart_gl_XSPACING + "px";
    this.element.style.marginTop = BrackChart_gl_YSPACING + "px";
    this.element.style.marginBottom = BrackChart_gl_YSPACING + "px";
  }

  this.element.style.width = this.rounds.length * (BrackChart_gl_WIDTH + BrackChart_gl_XSPACING) + "px";
}

BrackChart.prototype.useConfig = function(config)
{
  this.config = config;
}

BrackChart.prototype.createRounds = function(data)
{
  var lastRound = null;
  var rounds = [];

  for (let roundData of data)
  {
    var round = new BrackChartRound();
    round.setParent(lastRound);
    round.createFromData(roundData);
    lastRound = round;
    rounds.push(round);
  }

  return rounds;
}

BrackChart.prototype.updateMatchDimensions = function()
{
  for (let [xIndex, round] of this.rounds.entries())
  {
    for (let [yIndex, match] of round.matches.entries())
    {
      match.x = xIndex * (BrackChart_gl_WIDTH + BrackChart_gl_XSPACING);

      if (match.hasParents())
      {
        match.y = (match.parent1.y + match.parent2.y) / 2;
      }
      else
      {
        match.y = yIndex == 0 ? 0 : round.matches[yIndex - 1].y + BrackChart_gl_HEIGHT + BrackChart_gl_YSPACING;
      }

      match.width = BrackChart_gl_WIDTH;
      match.height = BrackChart_gl_HEIGHT;
    }
  }
}

BrackChart.prototype.createChart = function()
{
  if (this.config !== undefined) this.config.use();
  this.updateMatchDimensions();
  this.rounds.forEach(round =>...