JSFiddle - React, Tailwind, and code Playground

by mzilverberg

HTML

<link rel="stylesheet" href="https://www.vi.nl/.resources/vinl-website-theme/css/vi.min~2018-06-26-09-37-20-000~cache.css">
<div class="o-knockout--wrapper">
  <ol class="c-knockout">
    <li class="c-knockout__round c-knockout__round--1/8">
      <ol class="c-knockout__matches">
        <li class="c-knockout__match">
          <time datetime="2018-06-30 16:00:00" class="c-time u-h3">Za 30 jun, 16:00</time>
          <a href="https://www.vi.nl/pro/overig/wk-profiel-marokko-kameleon-in-tactiek-rekent-op-virtuoos-boussoufa">
            <span class="c-team c-team--home">
              <img src="https://api.fifa.com/api/v1/picture/flags-fwc2018-5/fra" alt="FRA" class="c-img">
              <span class="c-team__abbr">FRA</span>
              <span class="c-team__goals">2</span>
            </span>
            <span class="c-team c-team--away">
              <img src="https://api.fifa.com/api/v1/picture/flags-fwc2018-5/arg" alt="ARG" class="c-img">
              <span class="c-team__abbr">ARG</span>
              <span class="c-team__goals">1</span>
            </span>
            <span class="c-tag c-tag--pro"><span class="u-hidden-xs">Tactische </span><span>analyse</span></span>
          </a>
        </li>
        <li class="c-knockout__match">
          <time datetime="2018-06-30 20:00:00" class="c-time u-h3">Za 30 jun, 20:00</time>
          <a href="javascript:;">
            <span class="c-team c-team--home">
              <img src="https://api.fifa.com/api/v1/picture/flags-fwc2018-5/uru" alt="URU" class="c-img">
              <span class="c-team__abbr">URU</span>
              <span class="c-team__goals">-</span>
            </span>
            <span class="c-team c-team--away">
              <img src="https://api.fifa.com/api/v1/picture/flags-fwc2018-5/por" alt="POR" class="c-img">
              <span class="c-team__abbr">POR</span>
              <span class="c-team__goals">-</span>
            </span>
            <!-- <span class="c-tag c-tag--pro"><span...

SCSS

// body { max-width: 320px; }

$column-margin: 24px;
$column-margin-md: 60px; 
$match-color: #f2ebe4;
$bracket-color: #0f4583;
$bracket-radius: 0;
$bracket-line-width: 1px;
$team-height: 27px;
$team-margin: 5px;

.c-knockout {
  display: flex;
	margin-left: -$column-margin;
  padding-left: 0;
  overflow: hidden; // prevent overflow of bracket lines

  @media (min-width: 48em) {
    margin-left: -$column-margin-md;
  }
	
	&__round {
    display: block;
		width: 25%;
    padding-left: $column-margin;

    @media (min-width: 48em) {
      padding-left: $column-margin-md;
    }
		
		&--1\/8 {  }
		&--1\/4 {  }
		&--1\/2 {  }
		&--finals { 

      // 3rd place
      .c-knockout__match:first-child {
        position: absolute;
        bottom: 0;

        &:before {
          display: none;
        }
      }

    }
	}
  
  &__matches,
  &__match {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  &__matches {
    justify-content: space-around;
    height: 100%;
    padding-left: 0;
    margin-left: 0;
  }
  
  &__match {
    width: 100%;
    margin: 18px 0 0;
    padding-left: 0;

    @media (min-width: 48em) {
      margin-top: 24px;
    }

    &:before,
    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      top: calc(50% - #{$bracket-line-width});
      width: $column-margin / 2;
      border: solid $bracket-color;

      @media (min-width: 48em) {
        top: calc(50% + #{18px - $bracket-line-width});
        width: $column-margin-md / 2;
      }
    }

    &:before {
      right: 100%;
      border-width: $bracket-line-width 0 0;
    }

    &:after {
      height: 1000%;
      border-width: $bracket-line-width $bracket-line-width 0 0;
      left: 100%;
    }

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      &:after {
        border-right-color: #fff; 
      }
    }

    a {
      color: #1f1f1f;

      &:hover,
      &:focus {
        text-decoration: none;

       ...