BBC Live Football Coverage (CSS Grid)

HTML

              
                <!-- svg icon sprite -->
<svg class="dn">
  <symbol viewBox="0 0 24 24" id="card">
    <path fill="currentColor" d="M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
  </symbol>

  <symbol viewBox="0 0 24 24" id="substitute">
    <path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z "></path>
  </symbol>
</svg>

<main class="dark-gray sans-serif grid matchday">

  <nav class="a-✈️ bg-yellow pa3 flex items-baseline">
    <div class="content-measure center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 30" width="120" class="dark-gray">
        <path fill="currentColor" d="M8.5 17.4l-3.1-1.9c-2-1.2-3.4-2.4-4.2-3.6C.4 10.7 0 9.3 0 7.8c0-2.3.8-4.2 2.4-5.6C3.9.8 6 0 8.5 0c2.4 0 4.6.7 6.6 2.1v4.8c-2.1-2-4.3-3-6.7-3-1.4-.1-2.5.2-3.3.9-.9.6-1.3 1.4-1.3 2.4 0 .9.3 1.7 1 2.5.6.8 1.7 1.6 3.1 2.4L11 14c3.5 2.1 5.3 4.8 5.3 8.1 0 2.3-.8 4.2-2.3 5.7-1.5 1.5-3.5 2.2-6 2.2-2.8 0-5.4-.9-7.7-2.7V22c2.2 2.9 4.8 4.3 7.7 4.3 1.3 0 2.4-.4 3.2-1.1.9-.7 1.3-1.6 1.3-2.7-.2-1.8-1.4-3.5-4-5.1zm12 12.3V.4h9.1c2.7 0 4.9.8 6.6 2.3 1.6 1.5 2.4 3.5 2.4 6.1 0 1.7-.4 3.2-1.3 4.5-.8 1.3-2 2.3-3.4 2.9-1.5.6-3.5.9-6.2.9h-3v12.7h-4.2zm8.4-25.6h-4.3v9.1h4.5c1.7 0 3-.4 3.9-1.2.9-.8 1.4-2 1.4-3.4-.1-3-1.9-4.5-5.5-4.5zM56.3 0c4.4 0 8.1 1.4 11.1 4.3s4.4 6.4 4.4 10.8c0 4.3-1.5 7.9-4.5 10.7-3 2.8-6.7 4.2-11.3 4.2-4.3 0-7.9-1.4-10.8-4.2-2.9-2.8-4.3-6.4-4.3-10.6 0-4.4 1.5-8 4.4-10.8 2.9-3 6.5-4.4 11-4.4zm.1 4c-3.3 0-6 1-8.1 3.1-2.1 2.1-3.2 4.8-3.2 8s1.1 5.8 3.2 7.9c2.1 2.1 4.8 3.1 8 3.1s5.9-1.1 8-3.2c2.1-2.1 3.2-4.8 3.2-8 0-3.1-1.1-5.7-3.2-7.8C62.2 5 59.6 4 56.4 4zm20.5 25.7V.4h7.2c2.9 0 5.2.7 6.9 2.2 1.7 1.5 2.6 3.4 2.6 5.9 0 1.7-.4 3.2-1.3 4.4-.8 1.2-2 2.2-3.6 2.8.9.6 1.8 1.5 2.7 2.5.9 1.1 2.1 2.9 3.7 5.5 1 1.7 1.8 2.9 2.4 3.7l1.5 2.1h-4.9l-1.3-1.9c0-.1-.1-.2-.2-.4l-.8-1.2-1.3-2.1-1.4-2.3c-.8-1.2-1.6-2.2-2.3-2.9-.7-.7-1.3-1.2-1.9-1.5-.6-.3-1.5-.5-2.9-.5h-1.1v12.7h-4zM82.3 4h-1.2v9.2h1.6c2.1 0 3.5-.2 4.3-.5.8-.4 1.4-.9 1.8-1.6.4-.7.6-1.6.6-2.5 0-.9-.2-1.8-.7-2.5-.5-.7-1.2-1.3-2-1.6-1-.4-2.4-.5-4.4-.5zM96 .4h24v3.7h-10v25.6h-4.1V4.1H96V.4z" />
      </svg>
      <a href="/sport/football" class="dark-gray link f3 ttu fw5 ml3">Football  </a>
    </div>
  </nav>

  <aside class="a-⚽️ grid overview bg-near-black white mt pv4 ph3 ph0-l lh-copy">
    <!-- match date -->
    <time datetime="2017-02-26" class="j-self-end hs2 f7 ttu b">SUN, 26 Feb 2017</time>
    <!-- match type -->
    <span class="hs2 f7 ttu">EFL Cup - Final</span>

    <!-- Home Team Name -->
    <abbr title="Manchester United" class="j-self-end self-center f4 f3-ns">
      <span class="dn dn-m di-l">Manchester United</span>
      <span class="di di-m dn-l">Man Utd</span>
    </abbr>
    <!-- Home Team Goals -->
    <span class="dib bg-yellow dark-gray fw8 lh-solid tc self-center h2 flex items-center justify-center f4 f3-ns pv0 pv2-ns ph2 ph3-ns">3</span>
    <!-- Away Team Goals -->
    <span class="dib bg-yellow dark-gray fw8 lh-solid tc self-center h2 flex items-center justify-center f4 f3-ns pv0 pv2-ns ph2 ph3-ns">2</span>
    <!-- Away Team Name -->
    <abbr title="Southampton" class="self-center f4 f3-ns">Southampton</abbr>

    <!-- Home info -->
    <ul class="ph0 mv0 list j-self-end f7 f6-ns tr">
      <li class="dib">
        Ibrahimovic
        (19'<span class="clip"> minutes</span>,
        87'<span class="clip"> minutes</span>),
      </li>
      <li class="dib">
        Lingard
        (38'<span class="clip"> minutes</span>)
      </li>
    </ul>
    <!-- Clock & HT score -->
    <div class="hs2 tc">
      <abbr title="Full Time" class="db yellow f7 mb2">FT</abbr>
      <div class="f7">
        <abbr title="Half Time">HT</abbr>
        2 - 1
      </div>
    </div>
    <!-- Away info -->
    <ul class="ph0 mv0 list f7 f6-ns">
      <li class="dib">
        Gabbiadini
        (45'+1<span class="clip"> minutes</span>,
        48'<span class="clip"> minutes</span>)
      </li>
    </ul>
  </aside>

  <!-- Media Section -->
  <header class="a-🖼 cover bg-top relative white vh-50 inset-shadow-ns flex items-end"
    style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/united.jpg');">

    <div class="a-🎩 content-measure center ho1 white flex items-end ph3 ph0-l pb5-l">
      <div class="z-1 pv4 ph3 nl3 nr3 bg-near-black bg-transparent-ns">
        <h1 class="mt0 mb2 w-80-l f3 f2-ns lh-title">EFL Cup final: Reaction as Ibrahimovic breaks Saints hearts</h1>
        <div class="flex items-center">
          <svg viewBox="0 0 32 32" width="1em" height="1em" fill="currentColor" class="dib mr2 f7">
            <polygon points="17,15.4 17,6 15,6 15,16.6 23.8,21.7 24.8,19.9"></polygon>
            <path d="M16,4c6.6,0,12,5.4,12,12c0,6.6-5.4,12-12,12S4,22.6,4,16C4,9.4,9.4,4,16,4 M16,0C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16 s16-7.2,16-16C32,7.2,24.8,0,16,0L16,0z"></path>
          </svg>
          <time datetime="2017-02-26T14:00:00+00:00" class="f7">
            26 Feb 2017
          </time>
        </div>
      </div>
    </div>

  </header>

  <!-- Summary -->
  <aside class="a-👀 bg-near-white nt5-l z-1 bt b--blue bw2 ph3 pb3 top-1 self-start sticky-l sticky-xl">
    <h2 class="fw4 f4">Summary</h2>
    <ul class="list--square pl3 f6 lh-copy mv0">
      <li class="mb2">Listen on BBC Radio 5 live using the audio button</li>
      <li class="mb2">Ibrahimovic heads in for late Man Utd glory</li>
      <li class="mb2">Gabbiadini had scored twice to bring Saints back to 2-2</li>
      <li class="mb2">Lingard and Ibrahimovic gave United 2-0 lead</li>
      <li class="mb2">Mourinho could become first Man Utd boss to win trophy in first season</li>
      <li class="mb0">Southampton looking for first major trophy since 1976</li>
    </ul>
  </aside>

  <!-- Tab Navigation for when content is collapsed -->
  <section class="a-🗂 a-📋-l a-📋-xl bg-near-white bg-transparent-l dn-xl nt5-l z-1 lh-title">
    <ul role="tablist" class="list pl0 mv0 flex">
      <li role="presentation" class="flex-auto mr2">
        <button role="tab" aria-selected="true" aria-controls="tab-live-reporting" tabindex="0"
          onclick="activateTab('tab-live-reporting')"
          id="js-reporting-btn"
          class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-white bt bw2 b--blue">
          Live Reporting
        </button>
      </li>
      <li role="presentation" class="flex-auto mr2">
        <button role="tab" aria-selected="false" aria-controls="tab-match-stats" tabindex="-1"
          onclick="activateTab('tab-match-stats')"
          id="js-stats-btn"
          class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-moon-gray bt-0">
          Match Stats
        </button>
      </li>
      <li role="presentation" class="flex-auto mr2">
        <button role="tab" aria-selected="false" aria-controls="tab-line-ups" tabindex="-1"
          onclick="activateTab('tab-line-ups')"
          id="js-line-ups-btn"
          class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-moon-gray bt-0">
          Line-ups
        </button>
      </li>
    </ul>
  </section>

  <!-- Live Reporting -->
  <section class="a-📋 a-📻-xl bg-white nt5-xl z-2 lh-copy mb4" id="js-reporting"
    aria-labelledby="tab-live-reporting" role="tabpanel">
    <header class="bb-xl b--moon-gray ph3 pb3 pt0 pt3-xl">
      <h2 class="mv0 fw4 f4 dn db-xl">Live Reporting</h2>
      <p class="f6 mb0 flex items-end">By Shamoon Hafez
        <span class="flex-auto"></span>
        <button class="justify-end bg-dark-blue w4 h2 bt-0 bl-0 br-0 b bw1 white bb b--navy grow pointer">Get involved</button>
      </p>
    </header>

    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">14:20</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <h2 class="mt0 mb1 lh-solid f4">Goodbye</h2>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>

        <p>One of THE great cup finals.</p>

        <ul class="pl4">
          <li>Jose Mourinho joins legends Sir Alex Ferguson and Brian Clough in winning the League Cup four times.</li>
          <li>Mourinho becomes the first Manchester United manager to win a major trophy in his first season.</li>
          <li>Mourinho keeps up a 100% winning record in English domestic finals.</li>
        </ul>
        <p>But it is Zlatan Ibrahimovic's name which will be at the top of the headlines after the Swede scored twice, including a late winner, to give United victory over Southampton.</p>

        <p><a class="link hover-blue bb b--moon-gray b dark-gray" href="http://www.bbc.co.uk/sport/football/39018813" alt="Have a read of Phil McNulty's match report from Wembley">Have a read of Phil McNulty's match report from Wembley</a></p>

        <p>We are back on Monday for Premier League action as champions Leicester take on Liverpool.</p>

        <p>Until then.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:49</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Manchester United win EFL Cup</p>
        </header>
        <p>A dab from Paul Pogba with the trophy. Of course.</p>
        <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/pogba.jpg" alt="Paul Pogba celebrates" /></p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:46</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <div class="mt3 flex items-center">
          <img class="br-100 w3 h3 mr2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/shearer.jpg" />
          <div class="f6">
            <p class="mv0">Alan Shearer</p>
            <p class="mv0">Ex-Southampton striker on BBC Radio 5 live</p>
          </div>
        </div>
        <p>Zlatan made all the difference. It was a stunning free kick.</p>
        <p>The way he used all of his experience - not just in his two goals but everywhere on the pitch, he deserves that Man of the Match trophy.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4 bg-lightest-blue">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:37</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="pb3">
        <header class="flex items-start">
          <svg viewBox="0 0 32 32" width="4rem" class="pr3 border-box"><g fill="#4E7A22"><path d="M3 23.1l-.7.7.7-.7-.7.7c-.4.4-.5.8-.1 1.2l4.4 4.4c.4.4.9.4 1.3 0l.1-.1.6-.6L3 23.1zM19.8 10.5l-2.4 2.4s-1.2 1.2-2.7 2c-1.5.8-4.3 2-5.5 2.7-1.2.7-2 1.4-2.7 1.9l5.5 5.6.1-.1c.5-.7 1.2-1.5 1.9-2.7.7-1.2 2-3.9 2.8-5.3.8-1.5 2-2.6 2-2.6l2.5-2.4-1.5-1.5z"></path></g><path fill="#FFF" d="M14.8 21.4c-.2-.1-2.2-.7-3-1.5-.8-.8-1.4-2.8-1.5-3l.9-.3c.2.5.7 2 1.3 2.6.5.5 2 1.1 2.6 1.3l-.3.9z"></path><path fill="#CCC" d="M25.566 5.908l.707.707-3.606 3.606-.707-.706zM26.1 14.9c-.6 0-1.2-.2-1.6-.7-.8-.8-.8-2 0-2.7l.7.7c-.2.2-.3.4-.3.7 0 .2.1.5.3.7.5.5 1.3.5 1.8 0 .7-.7.7-1.8 0-2.4-.9-.9-2.7-1-3.6-.1l-.7-.7c.6-.6 1.5-.9 2.5-.9s1.9.4 2.5 1c1.1 1.1 1.1 2.8 0 3.9-.4.3-1 .5-1.6.5zM21.9 9.4l-.7-.7c.8-.9.8-2.6-.1-3.5-.7-.7-1.8-.7-2.4 0-.5.5-.5 1.3 0 1.8l-.7.7c-.9-.9-.9-2.3 0-3.2 1.1-1.1 2.8-1.1 3.9 0 .6.6 1 1.5 1 2.5-.1.9-.4 1.8-1 2.4z"></path><path d="M8.6 28.7L3 23.1l3.5-3.5 5.5 5.6z"></path><path fill="#C7B299" d="M28 6.8l1-1.5c.2.1.5.1.7-.1l.2-.2c.3-.3.3-.7 0-1l-1-1c-.3-.3-.7-.2-.9 0l-.2.2c-.2.2-.2.5-.1.7l-1.5.9 1.8 2z"></path></svg>
          <div>
            <h2 class="mt0 mb1 lh-solid ttu flex items-center f4">
              <span class="ttu bg-blue dib white f6 pa1 f7 fw4 mr2">Breaking</span>
              CHAMPAGNE MOMENT
            </h2>
            <p class="mv0 f6">Manchester United win EFL Cup</p>
          </div>
        </header>
        <p>🏆🏆🏆</p>
        <p>Wayne Rooney lifts the trophy.</p>
        <p>Manchester United are the EFL Cup champions.</p>
        <p>Jose Mouriho becomes the first United manager to win a trophy in his first season at the club.</p>
        <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/trophy.jpg" alt="Wayne Rooney" /></p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:35</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Manchester United win EFL Cup</p>
        </header>
        <p>Zlatan Ibrahimovic is named the man of the match.</p>
        <p>Surprise, surprise.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:28</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Manchester United win EFL Cup</p>
        </header>
        <p>They signed him on a free, but Zlatan Ibrahimovic has been a priceless acquisition for Manchester United.</p>
        <p>26 goals for the season now, including two in the EFL Cup final against Southampton.</p>
        <p>It is the 19th major trophy of his illustrious career and first for United.</p>
        <p>"This is what I came for, I came to win," he tells Sky Sports.</p>
        <p>Big game player.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:23</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <h2 class="f4 mt0 mb1 lh-solid">FULL-TIME</h2>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>It's four in four for Jose Mourinho, as Manchester United beat Southampton in an epic EFL Cup final.</p>
        <p>Zlatan Ibrahimovic with the winning goal three minutes from time.</p>
        <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/full-time.jpg" alt="Manchester United celebrate" /></p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+4 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Match-winner Zlatan Ibrahimovic earns a free-kick deep in the attacking half.</p>
        <p>Time is up.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+3 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Pumped into the Manchester United area...</p>
        <p>...it falls to Ryan Bertrand...</p>
        <p>...but the left-backs shot is blocked by a red shirt.</p>
        <p>United almost there.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+3 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Can Southampton take it into extra time???</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+3 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>INTO THE LAST MINUTE.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+2 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Clever from Paul Pogba, goes down under a challenge from a Southampton man.</p>
        <p>Eats away a few more seconds.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+2 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>"We'll never die, we'll never die, we'll keep the red flag flying high," sing the United fans at Wembley.</p>
        <p>120 seconds left.</p>
        <p>Southampton need to get the ball forward.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90+1 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Is there a twist left in this match? Can Southampton reply as they did early in the match?</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">90 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>The 90 minutes are up.</p>
        <p>FOUR ADDED ON.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">89 mins</span>
      </time>
      <div class="bb b--moon-gray pb3">
        <header>
          <h2 class="f4 mt0 mb1 lh-solid">SUBSTITUTION</h2>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <p>Wayne Rooney was getting ready to come on, his tracksuit was off and he celebrated the goal wildly but he won't be making his entrance anymore.</p>
        <p>On comes Marouane Fellaini instead, replacing Anthony Martial.</p>
        <p>Southampton have to go for it and send on striker Jay Rodriguez for Steven Davies.</p>
        <p>One minute left.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">13:16</span>
        <span class="di db-ns">26 Feb</span>
      </time>
      <div class="pb3">
        <header>
          <p class="mv0 f6">Man Utd 3-2 Southampton</p>
        </header>
        <div class="mt3 flex items-center">
          <img class="br-100 w3 h3 mr2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/shearer.jpg" />
          <div class="f6">
            <p class="mv0">Alan Shearer</p>
            <p class="mv0">Ex-Southampton striker on BBC Radio 5 live</p>
          </div>
        </div>
        <p>What a ball that was into Ibrahimovic and no way was he going to miss that.</p>
        <p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/zlatan.jpg" alt="Zlatan Ibrahimovic" />
        </p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4 bg-lightest-blue">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">89 mins</span>
      </time>
      <div class="pb3">
        <header>
          <div class="flex items-start">
            <svg viewBox="0 0 32 32" width="3rem" class="dib mr2"><path d="M0 0v16h2v-4h3c.5-.9 1.3-2.6 2-3.3V7h2c.8-.5 2-1.3 3-1.6V2h3v3h2V2h3V5.3c.9.3 2.2 1.1 3 1.6h2v1.7c.7.8 1.5 2.3 2 3.3h3v4h2V0H0zm5 10H2V7h3v3zm0-5H2V2h3v3zm5 0H7V2h3v3zm15 0h-3V2h3v3zm5 5h-3V7h3v3zm0-5h-3V2h3v3z"></path><circle fill="#FFF" cx="16" cy="16.7" r="10"></circle><path d="M12.6 15.6l1.3 4h4.2l1.3-4-3.4-2.5z"></path><path d="M16 6C9.9 6 5 10.9 5 17s4.9 11 11 11 11-4.9 11-11S22.1 6 16 6zm7.8 17.2l-.2-1.6-3.7.8-1.9 3.2 1.5.7c-1.1.4-2.3.7-3.5.7-1.2 0-2.4-.2-3.5-.6l1.5-.7-1.9-3.2-3.7-.8-.2 1.6C6.9 21.5 6 19.4 6 17v-.4l1.1 1.2L9.7 15l-.4-3.7-1.6.3c1.3-2 3.3-3.5 5.7-4.1l-.8 1.4 3.4 1.5 3.4-1.5-.8-1.4c2.4.5 4.4 2 5.7 4l-1.6-.3-.4 3.7 2.5 2.8 1.1-1.2v.5c.1 2.3-.8 4.5-2.1 6.2z"></path></svg>
            <div>
              <h2 class="f4 mt0 mb1 lh-solid">GOAL - Man Utd 3-2 Southampton</h2>
              <p class="mv0 f6">Zlatan Ibrahimovic</p>
            </div>
          </div>
        </header>
        <p>It is him again, who else!!</p>
        <p>From getting away at one end, United score at the other.</p>
        <p>Ander Herrera's cross is pin-point onto the head of <b>Zlatan Ibrahimovic</b>, who heads home from six yards out.</p>
        <p>No way he was missing that.</p>
        <p>Heartbreak for the Saints.</p>
        <p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/goal.jpg" alt="Zlatan Ibrahimovic"  />
        </p>
        <p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/celebration.jpg" alt="Manchester United celebrate"  />
        </p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">86 mins</span>
      </time>
      <div class="pb3 bb b--moon-gray">
        <header>
          <p class="mv0 f6">Man Utd 2-2 Southampton</p>
        </header>
        <p>United break to the other end...</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">86 mins</span>
      </time>
      <div class="pb3 bb b--moon-gray">
        <header>
          <h2 class="f4 mt0 mb1 lh-solid">OFF THE LINE!</h2>
          <p class="mv0 f6">Man Utd 2-2 Southampton</p>
        </header>
        <p>Oh so close for Southampton.</p>
        <p>Ryan Bertrand puts a brilliant ball into the area, not for the first time, but Shane Long cannot prod it home.</p>
        <p>From the resulting corner, Zlatan Ibrahimovic heads Jack Stephens's effort off the line.</p>
      </div>
    </article>
    <article class="grid-ns post ph3 pt4">
      <time class="f6 tr-ns mb3 mb0-ns db">
        <span class="clip">Posted at</span>
        <span class="di db-ns">85 mins</span>
      </time>
      <div class="pb3">
        <header>
          <p class="mv0 f6">Man Utd 2-2 Southampton</p>
        </header>
        <p>Wayne Rooney taking instructions from assistant manager Rui Faria.</p>
        <p>The bib is off.</p>
      </div>
    </article>
    <div class="grid-ns post ph3 pt4">
      <button class="ho1 w-100 f6 bg-green pv2 bt-0 bl-0 br-0 b bw1 white bb b--dark-green grow pointer">Show more updates</button>
    </div>
  </section>

  <!-- Stats -->
  <aside class="a-📋 a-📊-xl bg-white ph3 pt3 pt0-xl nt5-xl z-1" id="js-stats"
    aria-labelledby="tab-match-stats" role="tabpanel">
      <h2 class="fw4 f4 dn db-xl">Match Stats</h2>
      <div class="flex items-center justify-center">
        <span class="clip">Home Team</span><span class="w1 h1 dib bg-dark-blue mr2"></span>
        <span class="mr3">Man Utd</span>
        <span class="clip">Away Team</span><span class="w1 h1 dib bg-blue mr2"></span> Southampton
      </div>
      <dl class="tc lh-copy">
        <dl>
          <dt class="b mb1">Possession</dt>
          <dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:48.3%;">
            <span class="clip">Home</span>
            <span>48%</span>
          </dd>
          <dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:51.7%;">
            <span class="clip">Away</span>
            <span>52%</span>
          </dd>
        </dl>
        <dl>
          <dt class="b mb1">Shots</dt>
          <dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:45.45454545454545%;">
            <span class="clip">Home</span>
            <b>10</b>
          </dd>
          <dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:54.54545454545454%;">
            <span class="clip">Away</span>
            <b>12</b>
          </dd>
        </dl>
        <dl>
          <dt class="b mb1">Shots on Target</dt>
          <dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:54.54545454545454%;">
            <span class="clip">Home</span>
            <b>6</b>
          </dd>
          <dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:45.45454545454545%;">
            <span class="clip">Away</span>
            <b>5</b>
          </dd>
        </dl>
        <dl>
          <dt class="b mb1">Corners</dt>
          <dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:20%;">
            <span class="clip">Home</span>
            <b>3</b>
          </dd>
          <dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:80%;">
            <span class="clip">Away</span>
            <b>12</b>
          </dd>
        </dl>
        <dl>
          <dt class="b mb1">Fouls</dt>
          <dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:45.83333333333333%;">
            <span class="clip">Home</span>
            <b>11</b>
          </dd>
          <dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:54.166666666666664%;">
            <span class="clip">Away</span>
            <b>13</b>
          </dd>
        </dl>
      </dl>
    </aside>

  <!-- line-ups -->
  <aside class="a-📋 a-🤼-xl bg-white ph3 pt3 pt5-xl z-1 flex flex-wrap content-start"
    id="js-line-ups"
    aria-labelledby="tab-line-ups" role="tabpanel">
    <h2 id="lx-football-team-lineups" class="mt0 fw4 f4 dn db-xl">Line-ups</h2>
    <div class="flex-auto mr3">
      <h3 class="mt0 mb3 f4">Man Utd</h3>
      <ul class="list pl0">
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">1</b>
          <abbr title="David de Gea">de Gea</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">25</b>
          <abbr title="A Valencia">A Valencia</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">3</b>
          <abbr title="Eric Bailly">Bailly</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">12</b>
          <abbr title="Chris Smalling">Smalling</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">5</b>
          <abbr title="Marcos Rojo">Rojo</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">21</b>
          <abbr title="Ander Herrera">Herrera</abbr>
          <span class="clip">Booked at 24mins</span>
          <svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">6</b><abbr title="Paul Pogba">Pogba</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">8</b>
          <abbr title="Juan Mata">Mata</abbr>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Michael Carrick" class="mr1">Carrick</abbr>
          <span class="clip">at</span>45'<span class="clip">minutes</span>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">14</b>
          <abbr title="Jesse Lingard">Lingard</abbr>
          <span class="clip">Booked at 41mins</span>
          <svg width="1em" height="1em" class="dib yellow mh2 f5 rot"><use xlink:href="#card"/></svg>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mr1 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Marcus Rashford" class="mr1">Rashford</abbr>
          <span class="clip">at</span>77'<span class="clip">minutes</span>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">11</b>
          <abbr title="Anthony Martial">Martial</abbr>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Marouane Fellaini" class="mr1">Fellaini</abbr>
          <span class="clip">at</span>90'<span class="clip">minutes</span>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">9</b>
          <abbr title="Zlatan Ibrahimovic">Ibrahimovic</abbr>
        </li>
      </ul>
      <h4 class="fw4 f4 mb3">Substitutes</h4>
      <ul class="list pl0 mb4">
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">10</b>
          <abbr title="Wayne Rooney">Rooney</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">16</b>
          <abbr title="Michael Carrick">Carrick</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">17</b>
          <abbr title="Daley Blind">Blind</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">18</b>
          <abbr title="Ashley Young">Young</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">19</b>
          <abbr title="Marcus Rashford">Rashford</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">20</b>
          <abbr title="Sergio Romero">Romero</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">27</b>
          <abbr title="Marouane Fellaini">Fellaini</abbr>
        </li>
      </ul>
    </div>
    <div class="flex-auto mb5">
      <h3 class="mt0 mb3 f4">Southampton</h3>
      <ul class="list pl0">
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">1</b>
          <abbr title="Fraser Forster">Forster</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">2</b>
          <abbr title="Cédric Soares">Soares</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">24</b>
          <abbr title="Jack Stephens">Stephens</abbr>
          <span class="clip">Booked at 40mins</span>
          <svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">3</b>
          <abbr title="Maya Yoshida">Yoshida</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">21</b>
          <abbr title="Ryan Bertrand">Bertrand</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">16</b>
          <abbr title="James Ward-Prowse">Ward-Prowse</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">14</b>
          <abbr title="Oriol Romeu">Romeu</abbr>
          <span class="clip">Booked at 18mins</span>
          <svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">8</b>
          <abbr title="Steven Davis">Davis</abbr>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Jay Rodriguez" class="mr1">Rodriguez</abbr>
          <span class="clip">at</span>90'<span class="clip">minutes</span>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">22</b>
          <abbr title="Nathan Redmond">Redmond</abbr>
          <span class="clip">Booked at 56mins</span>
          <svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">11</b>
          <abbr title="Dusan Tadic">Tadic</abbr>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Sofiane Boufal" class="mr1">Boufal</abbr>
          <span class="clip">at</span>77'<span class="clip">minutes</span>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">20</b>
          <abbr title="Manolo Gabbiadini">Gabbiadini</abbr>
          <span class="clip">Substituted for</span>
          <svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
          <abbr title="Shane Long" class="mr1">Long</abbr>
          <span class="clip">at</span>83'<span class="clip">minutes</span>
        </li>
      </ul>
      <h4 class="fw4 f4 mb3">Substitutes</h4>
      <ul class="list pl0 mb0">
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">7</b>
          <abbr title="Shane Long">Long</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">9</b>
          <abbr title="Jay Rodriguez">Rodriguez</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">12</b>
          <abbr title="Martín Cáceres">Cáceres</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">19</b>
          <abbr title="Sofiane Boufal">Boufal</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">23</b>
          <abbr title="Pierre-Emile Højbjerg">Højbjerg</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">38</b>
          <abbr title="Sam McQueen">McQueen</abbr>
        </li>
        <li class="pa2 bb b--moon-gray flex items-center">
          <b class="w2 dib">40</b>
          <abbr title="Mouez Hassen">Hassen</abbr>
        </li>
      </ul>
    </div>
    <div class="lh-copy w-100">
      <dl class="mv0">
        <dt class="dib b">Referee:</dt>
        <dd class="dib ml0">Andre Marriner</dd>
      </dl>
      <dl class="mv0">
        <dt class="dib b">Attendance:</dt>
        <dd class="dib ml0">85,264</dd>
      </dl>
    </div>
  </aside>
</main>

CSS

              
                /**
 * Main layout for the entire page
 */
.matchday {
  grid-column-gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "✈️"
    "⚽️"
    "🖼"
    "👀"
    "🗂"
    "📋";
}

@media screen and (min-width: 60em) and (max-width: 80em) {
  .matchday {
    grid-template-columns: 1fr 18rem 40rem 1fr;
    grid-template-areas:
      "✈️ ✈️ ✈️ ✈️"
      "⚽️ ⚽️ ⚽️ ⚽️"
      "🖼 🖼 🖼 🖼"
      ".  👀 📋  .";
  }
}
@media screen and (min-width: 80em) {
  .matchday {
    grid-template-columns: 1fr 18rem 40rem 18rem 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "✈️ ✈️ ✈️ ✈️ ✈️"
      "⚽️ ⚽️ ⚽️ ⚽️ ⚽️"
      "🖼 🖼 🖼 🖼 🖼"
      ".  👀 📻 📊  ."
      ".  👀 📻 🤼  .";
  }
}

.content-measure { width: 100%; }
@media screen and (min-width: 60em) and (max-width: 80em) { .content-measure { width: 59rem; } }
@media screen and (min-width: 80em) { .content-measure { width: 78rem; } }


/**
 * areas
 */
.a-✈️ { grid-area: ✈️; }
.a-⚽️ { grid-area: ⚽️; }
.a-🖼 { grid-area: 🖼; }
.a-👀 { grid-area: 👀; }
.a-📻 { grid-area: 📻; }
.a-📊 { grid-area: 📊; }
.a-🤼 { grid-area: 🤼; }
.a-🗂 { grid-area: 🗂; }
.a-📋 { grid-area: 📋; }

@media screen and (min-width: 30em) { .a-📋-ns { grid-area: 📋; } }
@media screen and (min-width: 30em) and (max-width: 60em) { .a-📋-m { grid-area: 📋; } }
@media screen and (min-width: 60em) and (max-width: 80em) { .a-📋-l { grid-area: 📋; } }
@media screen and (min-width: 80em) {
  .a-📊-xl { grid-area: 📊; }
  .a-🤼-xl { grid-area: 🤼; }
  .a-📻-xl { grid-area: 📻; }
}


/**
 * Layout for overview
 */
.overview {
  grid-template-columns: 1fr auto auto 1fr;
  grid-gap: 0.5rem;
}


/**
 * Layout for commentary post
 */
@media screen and (min-width: 30em) and (max-width: 60em) {
  .post {
    grid-template-columns: 3rem 1fr;
    grid-column-gap: 1rem;
  }
}

@media screen and (min-width: 60em) {
  .post {
    grid-template-columns: 3rem 1fr 3rem;
    grid-column-gap: 1rem;
  }
}


/**
 * Uitls
 */
abbr[title] { text-decoration: none; }
.grid { display: grid; }
.j-self-end { justify-self: end; }
.j-self-center { justify-self: center; }
.list--square { list-style-type: square; }
.rot { transform: rotate(10deg); transform-origin: 50% 50%; }
@media screen and (min-width: 30em) {
  .bg-transparent-ns { background-color: transparent; }
  .grid-ns { display: grid; }
}
@media screen and (min-width: 60em) and (max-width: 80em) {
  .sticky-l { position: sticky; }
  .bg-transparent-l { background-color: transparent; }
}
@media screen and (min-width: 80em)  {
  .sticky-xl { position: sticky; }
  .nt5-xl { margin-top: -4rem; }
  .dn-xl { display: none; }
  .db-xl { display: block; }
  .pt0-xl { padding-top: 0; }
  .pt3-xl { padding-top: 1rem; }
  .pt5-xl { padding-top: 4rem; }
  .bb-xl { border-bottom-style: solid; border-bottom-width: 1px; }
}

/**
 * Offsets
 */
.ho1 { grid-column-start: 2; }
.ho2 { grid-column-start: 3; }
.ho3 { grid-column-start: 4; }
.ho4 { grid-column-start: 5; }
.ho5 { grid-column-start: 6; }

/**
 * Col and row spans
 */
.hs1 { grid-column-end: span 1; }
.hs2 { grid-column-end: span 2; }
.hs3 { grid-column-end: span 3; }
.hs4 { grid-column-end: span 4; }
.hs5 { grid-column-end: span 5; }
.hs--end { grid-column-end: -1; }
.hs--full { grid-column: 1 / -1; }

.vs1 { grid-row-end: span 1; }
.vs2 { grid-row-end: span 2; }

@media screen and (min-width: 30em) {
  .hs1-ns { grid-column-end: span 1; }
  .hs2-ns { grid-column-end: span 2; }
  .hs3-ns { grid-column-end: span 3; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .hs1-m { grid-column-end: span 1; }
  .hs2-m { grid-column-end: span 2; }
  .hs3-m { grid-column-end: span 3; }
}

@media screen and (min-width: 60em) {
  .hs1-l { grid-column-end: span 1; }
  .hs2-l { grid-column-end: span 2; }
  .hs3-l { grid-column-end: span 3; }
}

@media screen and (min-width: 30em) {
  .inset-shadow-ns:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: linear-gradient(180deg,rgba(0, 0, 0, 0),rgba(18, 18, 18, 0.1) 30%,rgba(18, 18, 18, 0.6) 45%,rgba(18, 18, 18, 0.9) 65%,#121212 90%);
  }

}

JS

              
                var tabs = [];

      window.onload = function init() {
        tabs = [{
          id: 'tab-live-reporting',
          node: document.querySelector('#js-reporting'),
          btn: document.querySelector('#js-reporting-btn'),
        }, {
          id: 'tab-match-stats',
          node: document.querySelector('#js-stats'),
          btn: document.querySelector('#js-stats-btn'),
        }, {
          id: 'tab-line-ups',
          node: document.querySelector('#js-line-ups'),
          btn: document.querySelector('#js-line-ups-btn'),
        }];
      };

      function activateTab(type) {
        tabs.forEach(function updateTab(tab) {
          if (tab.id === type) {
            tab.node.classList.remove('z-1');
            tab.node.classList.add('z-2');
            tab.btn.classList.remove('bg-moon-gray', 'bt-0');
            tab.btn.classList.add('bg-white', 'bt', 'bw2', 'b--blue');
          } else {
            tab.node.classList.remove('z-2');
            tab.node.classList.add('z-1');
            tab.btn.classList.remove('bg-white', 'bt', 'bw2', 'b--blue');
            tab.btn.classList.add('bg-moon-gray', 'bt-0');
          }
        });
      }

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions