//------------------------------------
//  #TABS
//------------------------------------

//
// A simple abstraction for making equal-width navigation tabs.
//
// 1. Reset any residual styles (most likely from lists).
// 2. Tables for layout!
// 3. Force all `table-cell` children to have equal widths.
// 4. Force the object to be the full width of its parent. Combined with [2],
//    this makes the object behave in a quasi-`display: block;` manner.
//

.tabs {
  display: table; // [2]
  list-style: none; // [1]
  margin: 0; // [1]
  padding: 0; // [1]
  table-layout: fixed; // [3]
  text-align: center;
  width: 100%; // [4]
}

.tabs__item {
  display: table-cell; // [2]
}

.tabs__link {
  display: block;
}

.tabs__target {
  display: none;
}

.tabs__target--is-active {
  display: block;
}

//------------------------------------
//  #TABS
//------------------------------------


.tabs {}

//
// A simple abstraction for making equal-width navigation tabs.
//
// 1. Reset any residual styles (most likely from lists).
// 2. Tables for layout!
// 3. Force all `table-cell` children to have equal widths.
// 4. Force the object to be the full width of its parent. Combined with [2],
//    this makes the object behave in a quasi-`display: block;` manner.
//

.tabs__navigation {
  display: table; // [2]
  list-style: none; // [1]
  margin: 0; // [1]
  padding: 0; // [1]
  table-layout: fixed; // [3]
  text-align: center;
  width: 100%; // [4]
}

.tabs__navigation__item {
  display: table-cell; // [2]
}

.tabs__navigation__item__link {
  display: block;
}

.tabs__content {
  display: none;
}

.tabs__content--is-active {
  display: block;
}

Refactor Tabs to support content area
Refactor Tabs to support content area
