<nav class="tab">
    <span class="tab__indicator"></span>
    <ul class="tab__items">
      <li class="tab__item tab__item--active">
        <svg version="1.1" class="tab__icon" id="browse-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
          <path class="st0" d="M16,1.6C8,1.6,1.6,8,1.6,16S8,30.4,16,30.4S30.4,24,30.4,16S24,1.6,16,1.6z M16,5.2c4.7,0,8.6,3,10.1,7.2H5.9
            C7.4,8.2,11.3,5.2,16,5.2z M5.2,16c4.9,0,8.9,4.7,9,10.6C9.1,25.7,5.2,21.3,5.2,16z M17.8,26.6c0.1-5.9,4.1-10.6,9-10.6
            C26.8,21.3,22.9,25.7,17.8,26.6z"/>
        </svg>
        <p class="tab__title">Browse</p>
      </li>
      <li class="tab__item">
        <svg version="1.1" class="tab__icon" id="profile-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
          <g>
            <path id="path-1_1_" class="st0" d="M16,18.6c7.1,0,12.8,2.7,12.8,6v2.7c0,0.9-0.7,1.6-1.6,1.6H4.8c-0.9,0-1.6-0.7-1.6-1.6v-2.7
              C3.2,21.2,8.9,18.6,16,18.6z M16,3.2c3.3,0,6,2.7,6,6c0,3.3-2.7,6-6,6s-6-2.7-6-6C10,5.9,12.7,3.2,16,3.2z"/>
          </g>
        </svg>
        <p class="tab__title">Profile</p>
      </li>
      <li class="tab__item">
        <svg version="1.1" class="tab__icon" id="chat-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
          <path class="st0" d="M7.2,3.2h17.5c2.2,0,4,1.8,4,4v12.1c0,2.2-1.8,4-4,4h-6.2l-5,5c-0.2,0.2-0.6,0.4-1,0.4c-0.7,0-1.3-0.6-1.3-1.3
            v-4h-4c-2.2,0-4-1.8-4-4V7.2C3.2,5,5,3.2,7.2,3.2z"/>
        </svg>
        <p class="tab__title">Chat</p>
      </li>
      <li class="tab__item">
        <svg version="1.1" class="tab__icon" id="menu-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
          <path class="st0" d="M9.6,8c0-0.9,0.7-1.6,1.6-1.6h16c0.9,0,1.6,0.7,1.6,1.6s-0.7,1.6-1.6,1.6h-16C10.3,9.6,9.6,8.9,9.6,8z M28.8,16
            c0,0.9-0.7,1.6-1.6,1.6H4.8c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6h22.4C28.1,14.4,28.8,15.1,28.8,16z M4.8,22.4h16
            c0.9,0,1.6,0.7,1.6,1.6s-0.7,1.6-1.6,1.6h-16c-0.9,0-1.6-0.7-1.6-1.6S3.9,22.4,4.8,22.4z"/>
        </svg>
        <p class="tab__title">Menu</p>
      </li>
    </ul>
  </nav>

@font-face {
    font-family: 'Manrope';
    src: url('https://dummyimage.s3.eu-central-1.amazonaws.com/manrope-regular-webfont.woff2') format('woff2'),
         url('https://dummyimage.s3.eu-central-1.amazonaws.com/manrope-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

$tab-color: #FFFFFF;
$active-color: #4563F3;
$inactive-color: #BBC3CC;

$background-color: #DDE1E5;
$shadow-color: darken($background-color, 15%);

* {
  box-sizing: border-box;
}

body {
  font-family: 'Manrope', serif;
  background-color: $background-color;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab {
  padding: 0 30px;
  width: 40%;
  min-width: 320px;
  max-width: 587px;
  max-height: 133px;
  background-color: $tab-color;
  border-radius: 10px;
  box-shadow: 0 20px 20px -15px rgba($shadow-color, .5);
  
  @media (min-width: 800px) {
    border-radius: 20px;
  }
  
  &__indicator {
    position: absolute;
    left: 0;
    width: 43px;
    height: 4px;
    background-color: $active-color;
    z-index: 9999;
    display: block;
    border-radius: 30px;
    
    @media (min-width: 800px) {
      width: 50px;
    }
  }
  
  &__items {
    list-style: none;
    padding: 0;
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    max-height: 100%;
  }
  
  &__item {
    cursor: pointer;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    * {
      pointer-events: none;
    }
  }
  
  &__icon {
    width: 40%;
    max-height: 50px;
  }
  
  &__icon path {
    fill: $inactive-color;
    transition: fill .5s ease-in-out;
  }
  
  &__item--active path {
    fill: $active-color;
  }
  
  &__title {
    margin: 10% 0 0 0;
    color: $inactive-color;
    opacity: 0;
    font-size: 17px;
    transition: opacity .3s .15s ease-out;
  }
  
  &__item--active &__title {
    opacity: 1;
  }
}

const tab = document.querySelector('.tab');
const itemsParent = document.querySelector('.tab__items');
const items = document.querySelectorAll('.tab__item');
const indicator = document.querySelector('.tab__indicator');

TweenMax.set(tab, { transformPerspective: 400, transformOrigin:'center center'});

const getActiveTabIndex = () => {
  return Array.from(items).findIndex(item => item.classList.contains('tab__item--active'));
}

const getIndicatorPos = () => {
  const { x: tabX } = tab.getBoundingClientRect();
  const { width: itemWidth, x: itemX } = items[getActiveTabIndex()].getBoundingClientRect();
  const { width: indicatorWidth } = indicator.getBoundingClientRect();
 
  const indicatorPosition = (itemX + itemWidth/2 - indicatorWidth/2) - tabX;
  
  return indicatorPosition;
}

const setIndicatorPos = () => {
  TweenMax.set(indicator, { x: getIndicatorPos()});  
}

const tilt = (e) => {
  if (e.target.classList.contains('tab__item')) {
    const pageX = e.pageX ? e.pageX : e.touches[0].pageX;
    const rotate = pageX - window.innerWidth/2; 
  
    TweenMax.to(e.target, .2, { scale: .8, ease: Power4.easeOut });
    TweenMax.to(tab, .5, { rotationY: 0.03 * rotate, rotationX: -Math.abs(0.015 * rotate), rotationZ: '-0.1' });
  }
}

const activateTab = (e) => {
  if (e.target.classList.contains('tab__item')) {
    items.forEach(item => item.classList.remove('tab__item--active'));
    e.target.classList.add('tab__item--active');
    
    TweenMax.to(indicator, .5, { x: getIndicatorPos() });
    TweenMax.to(e.target, .3, { scale: 1, ease: Back.easeOut.config(5) });
    TweenMax.to(tab, .5, { rotationY: 0, rotationX: 0, rotationZ: 0 }); 
  }
}

setIndicatorPos();

itemsParent.addEventListener('touchstart', tilt);
itemsParent.addEventListener('mousedown', tilt);

itemsParent.addEventListener('touchend', activateTab);
itemsParent.addEventListener('mouseup', activateTab);

window.addEventListener('resize', setIndicatorPos);