JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="tournament-grid">
<div class="tournament-grid-row"> <div class="stage">
										<div class="stage-title">1/4</div>
										<div class="stage-content">
											<div class="tournament-grid-match">
												<div class="info">
													<span>#004313</span>
													<span>30.06.18 16:00</span>
												</div>
												<div class="team team-winner" data-id="team1">
													<span class="name">E69 EXL</span>
													<span class="points">2</span>
												</div>
												<div class="team" data-id="team2">
													<span class="name">Syberian Fox</span>
													<span class="points">1</span>
												</div>
											</div>
											<div class="tournament-grid-match">
												<a href="#match-details-modal" class="details" data-show-modal><svg><use xlink:href='#info'></use></svg></a>
												<div class="info">
													<span>#004313</span>
													<span>30.06.18 16:00</span>
												</div>
												<div class="team" data-id="team3">
													<span class="name">YMD [Your Mom Day]</span>
													<span class="points">0</span>
												</div>
												<div class="team team-winner" data-id="team4">
													<span class="name">InYourFace</span>
													<span class="points">3</span>
												</div>
											</div>
											<div class="tournament-grid-match">
												<a href="#match-details-modal" class="details" data-show-modal><svg><use xlink:href='#info'></use></svg></a>
												<div class="info">
													<span>#004313</span>
													<span>30.06.18 16:00</span>
												</div>
												<div class="team team-winner" data-id="team5">
													<span class="name">mTw</span>
													<span class="points">3</span>
												</div>
												<div class="team" data-id="team6">
													<span class="name">Syberian Fox</span>
													<span...

SCSS

$color-alt: #dddddd;
$bg-light: #222222;
$color-accent: #ffffff;
$bg-extra-light: #333333;
$color-primary: #ffffff;
 
  .tournament-grid {
	padding: 28px 0 30px;
	background: #000000;
	overflow-x: auto;
    color: $color-primary;

	.tournament-grid-row {
		display: flex;
		/*padding-left: 24px;*/
		padding: 0 24px 0 57px;
	}

	.stage {
		position: relative;
		display: flex;
		flex-direction: column;
		/*margin-right: 50px;*/

		&:last-child {
			/*margin-right: 0;*/
			padding-right: 24px;
		}
	}

	.stage-title {
		flex: 0 0 auto;
		margin-bottom: 18px;
		font-weight: 700;
		text-transform: uppercase;

		.tip {
			font-weight: 400;
			color: #dddddd;
		}
	}

	.stage-content {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.stage:first-child {

		}
	}
}

.tournament-grid-match {
	position: relative;
	width: 156px;

	.stage:first-child & {
		margin-bottom: 29px;
	}

	.stage:first-child &:last-child {
		margin-bottom: 0;
	}

	.details {
		position: absolute;
		left: -24px;
		top: 44px;
		
		svg {
			display: block;
			width: 18px;
			height: 18px;
			fill: #444444;

			&:hover {
				fill: #555555;
			}
		}

	}

	.info {
		/*position: absolute;*/
		display: flex;
		justify-content: space-between;
		margin-bottom: 3px;
		font-size: 12px;
		color: $color-alt;
	}  
  
	.team {
		display: flex;
		justify-content: space-between;
		height: 28px;
		padding: 0 12px;
		line-height: 28px;
		vertical-align: middle;
		border-right: 4px solid $bg-light;
		background: $bg-light;
	}

	.team + .team {
		margin-top: 6px;
	}

	.name {
		display: block;
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: $color-accent;
	}

	.points {
		font-weight: 700;
		color: $color-primary;
	}

	.team-winner {
		background: $bg-extra-light;
		border-right-color: $color-accent;

		.name {
			font-weight: 700;
		}

		.points {
			color: $color-accent;
		}
	}
}

JavaScript

var lines, winner, winnerTwin, topPrev, topNext, stageTop;
  $('.lines').each(function() {
    var pathArr = [];
    lines = $(this);
    stageTop = lines.prev('.stage').offset().top;
    lines.prev('.stage').find('.team-winner').each(function() {
      winner = $(this);
      winnerTwin = lines.next('.stage').find('[data-id="' + winner.data('id') + '"]');
      if ( winnerTwin.length ) {
        topPrev = winner.offset().top - stageTop + 16;
        topNext = winnerTwin.offset().top - stageTop + 16;
        pathArr.push('<path d="M 0 ' + topPrev + ' L25 ' + topPrev + ' L25 ' + topNext + ' L50 ' + topNext + '" stroke="rgb(200, 200, 200)" stroke-width="2" fill="none"/>')
      }
    });
    lines.html('<svg width="50px" height="100%">' + pathArr.join('') + '</svg>');
  });