tab.tab
  ul.tab-items
  
    li.tab-item
      a.item-link(onclick="select(this)" href="#")
        | 🙋‍ Get Started
  
    li.tab-item
      a.item-link(onclick="select(this)" href="#")
        | 📖 Docs
  
    li.tab-item
      a.item-link(onclick="select(this)" href="#")
        | 📰 Blog
  
    li.tab-item
      a.item-link(onclick="select(this)" href="#")
        | 👨‍💻 Community
        
    .separator
  
    li.tab-item
      a.item-link(onclick="select(this)" href="#")
        | 💖 Contribute
    
    .tab-indicator
View Compiled
.tab
  max-width: 100%
  padding: 0 2em
  background-color: #FFF
  border-radius: .3rem
  box-shadow: 0 2px 2px #CCC
  line-height: 4em
  font-weight: bold
  white-space: nowrap
  overflow: auto

.tab-items
  --index: 1
  margin: 0
  padding: 0
  list-style: none
  display: inline-grid
  grid-auto-flow: column
  grid-gap: 1em
  
  @for $i from 1 through 6
    > :nth-child(#{$i})
      grid-column: #{$i} / #{$i + 1}

.tab-item
  display: inline
  grid-row: 1 / 2

  &.active .item-link
    color: #2DA

.item-link
  padding: 0 .75em
  color: #456
  text-decoration: none
  display: inline-block
  transition: color 256ms
  
  &:hover
    color: #297
    text-decoration: undelrine
  
.separator
  width: 1px
  height: 60%
  margin: 10% 0
  background-color: #CCC
  align-self: center

.tab-indicator
  height: 3px
  background-color: #2DA
  border-radius: 3px 3px 0 0
  grid-column: var(--index) / span 1 !important
  grid-row: 1 / 2
  align-self: end
  transition: all 300ms


// Page Layout 🚩

body
  min-height: 100vh
  background: #EEE
  font-family: 'Roboto', sans-serif
  display: grid
  place-items: center

*, *:before, *:after
  box-sizing: border-box
  
View Compiled
function select (link) {
  const item = link.parentNode
  const tabs = item.parentNode
  const index = Array.prototype.indexOf.call(tabs.children, item)
  const items = tabs.querySelectorAll('.tab-item')
  
  tabs.style.setProperty('--index', index + 1)
  items.forEach(item => item.classList.remove('active'))
  item.classList.add('active')
}


const items = document.querySelectorAll('.item-link')
const randomItem = items[Math.round(Math.random() * (items.length - 1))]

select(randomItem)

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.