JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div id="leftBracket"></div>
<div id="rightBracket"></div>

CSS

#leftBracket {
  float: left;
  width: 50%;
  background: pink;
  /* display: none; */
}

#rightBracket {
  float: left;
  width: 50%;
  bakckground: green;
  /* display: none; */
}

div.jQBracket {
  font-family: Arial;
  font-size: 14px;
  position: relative
}

div.jQBracket .tools {
  position: absolute;
  top: 0;
  color: #FFF
}

div.jQBracket .tools span {
  cursor: pointer;
  margin: 5px;
  display: block;
  text-align: center;
  width: 18px;
  height: 18px;
  background-color: #666
}

div.jQBracket .tools span:hover {
  background-color: #999
}

div.jQBracket .finals {
  float: right;
  right: 0;
  clear: right;
  position: relative
}

div.jQBracket .bracket {
  float: right;
  clear: left
}

div.jQBracket .loserBracket {
  float: right;
  clear: left;
  position: relative
}

div.jQBracket .round {
  position: relative;
  float: left
}

div.jQBracket .match {
  position: relative
}

div.jQBracket .editable {
  cursor: pointer
}

div.jQBracket .team {
  position: relative;
  z-index: 1;
  float: left;
  background-color: #EEE;
  cursor: default
}

div.jQBracket .team:first-child {
  border-bottom: 1px solid #999
}

div.jQBracket .team input {
  font-size: 14px;
  padding: 0;
  width: 100%;
  border: 0;
  margin: 0;
  outline: 0
}

div.jQBracket .team div.label {
  padding: 3px;
  position: absolute;
  height: 22px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box
}

div.jQBracket .team div.label[disabled] {
  cursor: default
}

div.jQBracket .team div.score {
  float: right;
  padding: 3px;
  background-color: rgba(255, 255, 255, .3);
  text-align: center;
  box-sizing: border-box
}

div.jQBracket .team div.score input {
  text-align: center
}

div.jQBracket .team div.score[disabled] {
  color: #999;
  cursor: default
}

div.jQBracket .team div.label input.error,
div.jQBracket .team div.score input.error {
  background-color: #FCC
}

div.jQBracket .team.np {
  background-color: #666;
  color: #EEE
}

div.jQBracket .team.na {
 ...

JavaScript

/* jQuery Bracket | Copyright (c) Teijo Laine 2011-2016 | Licenced under the MIT licence */
var __extends = this && this.__extends || function(a, b) {
  function c() {
    this.constructor = a
  }
  for (var d in b) b.hasOwnProperty(d) && (a[d] = b[d]);
  a.prototype = null === b ? Object.create(b) : (c.prototype = b.prototype, new c)
};
! function(a) {
  function b(a) {
    return !isNaN(parseFloat(a)) && isFinite(a)
  }

  function c() {
    this.message = "Root of information for this team", this.name = "EndOfBranchException"
  }

  function d(a) {
    function b(a, c) {
      return a instanceof Array ? b(a[0], c + 1) : c
    }
    return b(a, 0)
  }

  function e(a, b) {
    return b > 0 && (a = e([a], b - 1)), a
  }

  function f(b, c, d) {
    var e = d.find(".team[data-teamid=" + b + "]"),
      f = c ? c : "highlight";
    return {
      highlight: function() {
        e.each(function() {
          a(this).addClass(f), a(this).hasClass("win") && a(this).parent().find(".connector").addClass(f)
        })
      },
      deHighlight: function() {
        e.each(function() {
          a(this).removeClass(f), a(this).parent().find(".connector").removeClass(f)
        })
      }
    }
  }

  function g(b, c, d) {
    var e = d || c,
      g = e.winner(),
      h = e.loser();
    g && h && (g.name.isEmpty() || f(g.seed.get(), "highlightWinner", b).highlight(), h.name.isEmpty() || f(h.seed.get(), "highlightLoser", b).highlight()), b.find(".team").mouseover(function() {
      var c = a(this).attr("data-teamid");
      if (void 0 !== c) {
        var d = f(parseInt(c, 10), null, b);
        d.highlight(), a(this).mouseout(function() {
          d.deHighlight(), a(this).unbind("mouseout")
        })
      }
    })
  }

  function h(b, c, d) {
    var e = a('<input type="text">');
    e.val(c), b.empty().append(e), e.focus(), e.blur(function() {
      d(e.val())
    }), e.keydown(function(a) {
      var b = a.keyCode || a.which;
      9 !== b && 13 !== b && 27 !== b...