<main>
   <section class="ai-content">
      <header class="ai-content__title">
         <h1 class="text-center"> Animated Tabs </h1>
      </header>

      <section class="ai-content__main">
         <div class="ai-content__content">
           <div class="ai-tabs">
            <nav class="ai-tabs__tab-header">
             <ul>
              <li><a href="#one" class="ai-tabs__link">Tab one</a></li>
              <li><a href="#two" class="ai-tabs__link ai-tabs--active">Tab two</a></li>
              <li><a href="#three" class="ai-tabs__link">Tab three</a></li>
             </ul>
             <div class="ai-tabs__line-container">
              <div class="ai-tabs__line"></div>
             </div>
            </nav>
            <div class="ai-tabs__content-container">
             <div class="ai-tabs__content" id="one">
              Lorem ipsum dolor amet 3 wolf moon next level mixtape jianbing single-origin coffee knausgaard banh mi yuccie four loko four dollar toast. Slow-carb typewriter ugh gentrify, crucifix post-ironic mustache. 
             </div>
             <div class="ai-tabs__content"  id="two">
              Pinterest art party gluten-free, keytar banh mi vinyl synth aesthetic. Gentrify selvage photo booth ennui, viral fanny pack meggings whatever lo-fi lumbersexual offal beard. 
             </div>
             <div class="ai-tabs__content"  id="three">
              Tumblr ennui squid, literally typewriter sartorial celiac cloud bread hot chicken umami palo santo. Artisan meditation cray echo park intelligentsia pok pok health goth pop-up drinking vinegar pabst.
             </div>
            </div>
          </div>
         </div>
         <footer class="ai-image__container">
            <img src="https://spaceholder.cc/800x600" class="ai-image__img" />
         </footer
      </section>

      <footer class="ai-madeby">
         Made By <a href="http://beautiful-tragedy.com" _target="blank">Amanda Iaria</a>
      </footer>
   </section>
</main>

$colors: (
 w: #fff,
 dg: #333,
 b: #0cbfef,
 db: #087C9C,
 dw: #F1F5F7,
 lg: #ccc,
 bl: #000,
 fb: rgba(0,0,0,0.8)
);

$brand-color: map-get($colors, b);
$copy-color: map-get($colors, dw);
$background-color: map-get($colors, b);
$content-bg: map-get($colors, w);

$jose: 'Josefin Slab', serif;
$robslab: 'Roboto Slab', serif;
$open: 'Open Sans', sans-serif;
$rob: 'Roboto', sans-serif;

// Template
 body {
  background: $background-color;
  padding-top: 50px;

 }

 main {
    display: grid;
    align-content: center;
    grid: auto;
    height: 90vh;
 }

 p {
    font-family: $open;   
    line-height: 28px;
    font-size: 16px;

    &:first-letter {
       color: map-get($colors, b);
       font-size: 32px;
       font-weight: 800;
       font-family: $robslab;
    }
 }

 h1 {
    font-family: $jose;  
    text-align: center;
 }

 a {
  color: $brand-color;
    cursor: pointer;
  border-bottom: thin solid map-get($colors, bl);
    text-decoration: none;
  transition: 1s ease;
  padding-bottom: 4px;

  &:hover {
   text-decoration: none;
   border-bottom: thin solid $brand-color;
       color: $brand-color;
  }
 }

 .ai-content {
    background: map-get($colors, dg);
    border-radius: 5px;
    box-shadow: 0px 6px 14px 0px map-get($colors, bl);
    color: $copy-color;
    position: relative;
    margin: auto;
    width: 400px;
    padding: 16px;
   padding-bottom: 72px;
  
   &__title h1 {
     
   }
 }

 .ai-madeby {
    bottom: 0;
    font-family: $rob;
    font-weight: 100;
    margin-left: -16px;
    text-align: center;
    padding: 24px 0;
    position: absolute;
    width: 100%;
 }

 .ai-image {
    &__container {
       overflow: hidden;
       height: 60px;
       margin-left: -16px;
       margin-right: -16px;
    }
    &__img {
       width: 100%;
       margin-top: -100px;
    }
 }

// Tabs
.ai-tabs {
 
  &__tab-header  {
    margin-left: -16px;
    margin-right: -16px;

    ul {
      list-style: none;
      display: table;
      padding: 0;
      margin: 0;
      width: 100%;

      li {
        display: table-cell;
        text-align: center;
      }

      li a {
        display: block;
        padding: 24px;
        border-bottom: none;

        &:hover {
          background: $brand-color;
          color: map-get($colors, fb);
        }
      }
    }
  }
 
  &__line-container {
    display: block;
    height: 4px;
    position: relative;
    width: 100%;
  }
 
  &__line {
    height: 2px;
    background: $brand-color;
    position: absolute;
    width: auto;
    transition: 0.25s ease;
  }
 
  &__content {
    display: none;
    padding-top: 24px;
    padding-bottom: 32px;

    &.ai-tabs__content--active {
     display: block;
    }
  }
  
  &--active {
   // background: #ff0000;
  }
}

const $tabs = document.querySelectorAll('.ai-tabs__link'),
      $line = document.querySelector('.ai-tabs__line'),
      
      getPos = ($currentTarget) => {
        const $parentContainer = document.querySelector('.ai-tabs__tab-header ul'),
              currentWidth = $currentTarget.offsetWidth,
              currentPos = {
                top: $currentTarget.offsetTop - $parentContainer.offsetTop,
                left: $currentTarget.offsetLeft - $parentContainer.offsetLeft,
              };
        return currentPos;
      },
      
      onLoadLine = () => {
        const $onLoadActive = document.querySelector('.ai-tabs--active'),
              divId = $onLoadActive.getAttribute('href');
        
        animateLine($onLoadActive, $line);
        document.querySelector(divId).classList.add('ai-tabs__content--active');
      },
      
      animateLine = ($currentTarget, $l) => {
        const widthOfLine = $l.offsetWidth,
              currentWidth = $currentTarget.offsetWidth,
              currentPos = getPos($currentTarget);
        
        $l.style.left = `${currentPos.left}px`;
        $l.style.width = `${currentWidth}px`;
      },
      
      setActive = (e, $tabs) => {
        e.preventDefault();
        const divId = e.currentTarget.getAttribute('href');

        $tabs.forEach(($tab) => {
          $tab.classList.remove('ai-tabs--active');
        });

        document.querySelectorAll('.ai-tabs__content').forEach(($content) => {
         $content.classList.remove('ai-tabs__content--active');
        });

        e.currentTarget.classList.add('ai-tabs--active');
        document.querySelector(divId).classList.add('ai-tabs__content--active');
      };

$tabs.forEach(($tab) => {
  onLoadLine();
  $tab.addEventListener('click', (e) => {
    setActive(e, $tabs);
    animateLine(e.currentTarget, $line);
  });
});