.mw8.center.pa3
  h1.tc.ttu.tracked.f5.pv3.mb4 Simple tabs
  
  .tabs data-tabs=""
    .tabs-header
      a.tabs-header-link data-tabs-link="todo" To Do
      a.tabs-header-link data-tabs-link="in-progress" In Progress
      a.tabs-header-link data-tabs-link="completed" Completed

    .tabs-content
      .tabs-content-wrapper data-tab="todo"
        ul.lh-copy.pl3
          li Refactor to a class
      .tabs-content-wrapper data-tab="in-progress"
        ul.lh-copy.pl3
          li Procrastination
      .tabs-content-wrapper data-tab="completed"
        ul.lh-copy.pl3
          li.strike Make tabs
          li.strike Add some styles
          li.strike Some Vanilla JS to bring it to life

  .tabs.bordered data-tabs=""
    .tabs-header
      a.tabs-header-link data-tabs-link="todo" To Do
      a.tabs-header-link data-tabs-link="in-progress" In Progress
      a.tabs-header-link data-tabs-link="completed" Completed

    .tabs-content
      .tabs-content-wrapper data-tab="todo"
        ul.lh-copy.pl3
          li Refactor to a class
      .tabs-content-wrapper data-tab="in-progress"
        ul.lh-copy.pl3
          li Procrastination
      .tabs-content-wrapper data-tab="completed"
        ul.lh-copy.pl3
          li.strike Make tabs
          li.strike Add some styles
          li.strike Some Vanilla JS to bring it to life
View Compiled
.tabs {
  
  &.bordered {
    border: 2px solid;
  }
  
  &-header {
    overflow-y: auto;
    white-space: nowrap;
  
    &-link {
      display: inline-block;
      padding: .5rem 2rem;
      cursor: pointer;
      font-weight: bold;
      
      &:hover,
      &.active {
        background: #333;
        color: #fff;
      }
    }
  }
  
  &-content {
    border-top: 2px solid;
    padding: 1rem;
    
    &-wrapper {
      display: none;
      
      &.active {
        display: block;
      }
    }
  }
}
View Compiled
class Tabs {
  constructor(el) {
    this.tab = el
    this.tabLinks = this.tab.querySelectorAll('[data-tabs-link]')
    this.tabs = this.tab.querySelectorAll('[data-tab]')
    this.bindClick(this.tabLinks)
    // Initialize first tab
    this.activate(this.tabLinks[0])
  }
  
  bindClick(links) {
    links.forEach((link) => {
      link.addEventListener('click', (e) => this.activate(e.target))
    })
  }
  
  activate(activeLink) {
    this.tabLinks.forEach((link) => {
      if (activeLink === link) {
        link.classList.add('active')
      } else {
        link.classList.remove('active')
      }
    })
    
    this.showTab(activeLink.dataset.tabsLink)
  }
  
  showTab(tabName) {
    this.tabs.forEach((tab) => {
      if (tab.dataset.tab === tabName) {
        tab.classList.add('active')
      } else {
        tab.classList.remove('active')
      }
    })
  }
}

var t = document.querySelectorAll('[data-tabs]')
t.forEach((tab) => new Tabs(tab))
Rerun