Cacher is the code snippet organizer for pro developers

tabSlide();

$('.nav-tabs li').on('shown.bs.tab', function() {
  $('#magic-line').remove();
  tabSlide();
});

function tabSlide() {
  $("#example-one").append("<li id='magic-line'></li>");
  var $magicLine = $("#magic-line");
  $magicLine
    .width($(".active").width())
    .css("left", $(".active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());
  $("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
      left: leftPos,
      width: newWidth
    });
  }, function() {
    $magicLine.stop().animate({
      left: $magicLine.data("origLeft"),
      width: $magicLine.data("origWidth")
    });
  });

}

<div class="tab-container">
        <ul class="nav nav-tabs" role="tablist" id="example-one">
          <li role="presentation">
            <a href="#first" aria-controls="first" role="tab" data-toggle="tab">First</a>
          </li>
          <li role="presentation" class="active">
            <a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a>
          </li>
          <li role="presentation">
            <a href="#third" aria-controls="third" role="tab" data-toggle="tab">Third</a>
          </li>
          <li role="presentation">
            <a href="#fourth" aria-controls="fourth" role="tab" data-toggle="tab">Fourth</a>
          </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade" id="first">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui ligula, pretium dignissim erat semper non. Cras ultricies faucibus libero, id blandit nisi volutpat nec. Mauris sit amet ultrices ex. Donec bibendum dui id libero molestie efficitur.
            Ut egestas porta ligula, eget iaculis est finibus sed. Integer consectetur nec lorem vitae malesuada. Maecenas quis porta orci. Cras eleifend dui quis justo bibendum, nec pharetra risus blandit. Sed pharetra magna orci, eget eleifend sapien
            pretium in. Nulla cursus iaculis turpis vitae ullamcorper. Vivamus fringilla mattis gravida. Vestibulum sit amet porta justo.
            <br>
            <br> Vestibulum fringilla risus sed ante porta, sit amet eleifend tortor scelerisque. Maecenas euismod dignissim molestie. Sed est massa, laoreet et velit nec, porta dapibus massa. Aenean id commodo lectus. Aenean et dictum purus, sed hendrerit
            sapien. Maecenas ipsum ligula, aliquet sit amet felis eget, tincidunt pretium erat. In posuere augue a sem convallis suscipit ut a enim.
          </div>
          <div role="tabpanel" class="tab-pane fade active" id="second">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui ligula, pretium dignissim erat semper non. Cras ultricies faucibus libero, id blandit nisi volutpat nec. Mauris sit amet ultrices ex. Donec bibendum dui id libero molestie efficitur.
            Ut egestas porta ligula, eget iaculis est finibus sed. Integer consectetur nec lorem vitae malesuada. Maecenas quis porta orci. Cras eleifend dui quis justo bibendum, nec pharetra risus blandit. Sed pharetra magna orci, eget eleifend sapien
            pretium in. Nulla cursus iaculis turpis vitae ullamcorper. Vivamus fringilla mattis gravida. Vestibulum sit amet porta justo.
          </div>
          <div role="tabpanel" class="tab-pane fade" id="third">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui ligula, pretium dignissim erat semper non. Cras ultricies faucibus libero, id blandit nisi volutpat nec. Mauris sit amet ultrices ex. Donec bibendum dui id libero molestie efficitur.
            Ut egestas porta ligula, eget iaculis est finibus sed. Integer consectetur nec lorem vitae malesuada. Maecenas quis porta orci. Cras eleifend dui quis justo bibendum, nec pharetra risus blandit. Sed pharetra magna orci, eget eleifend sapien
            pretium in. Nulla cursus iaculis turpis vitae ullamcorper. Vivamus fringilla mattis gravida. Vestibulum sit amet porta justo.
            <br>
            <br> Vestibulum fringilla risus sed ante porta, sit amet eleifend tortor scelerisque. Maecenas euismod dignissim molestie. Sed est massa, laoreet et velit nec, porta dapibus massa. Aenean id commodo lectus. Aenean et dictum purus, sed hendrerit
            sapien. Maecenas ipsum ligula, aliquet sit amet felis eget, tincidunt pretium erat. In posuere augue a sem convallis suscipit ut a enim.
          </div>
          <div role="tabpanel" class="tab-pane fade" id="fourth">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui ligula, pretium dignissim erat semper non. Cras ultricies faucibus libero, id blandit nisi volutpat nec. Mauris sit amet ultrices ex. Donec bibendum dui id libero molestie efficitur.
            Ut egestas porta ligula, eget iaculis est finibus sed. Integer consectetur nec lorem vitae malesuada. Maecenas quis porta orci. Cras eleifend dui quis justo bibendum, nec pharetra risus blandit. Sed pharetra magna orci, eget eleifend sapien
            pretium in. Nulla cursus iaculis turpis vitae ullamcorper. Vivamus fringilla mattis gravida. Vestibulum sit amet porta justo.
          </div>
        </div>
      </div>

body {
  background: #f0f0f0;
  padding: 50px;
}
.tab-container {
  background: #fff;
  border: 1px solid #ccc;
}
.tab-container .nav-tabs {
  border-bottom: 1px solid #ccc;
  position: relative;
}
.tab-container .nav-tabs > li {
  margin-bottom: 0;
  position: initial;
}
.tab-container .nav-tabs > li > a {
  border: none;
  color: #999;
  margin: 0;
}
.tab-container .nav-tabs > li > a:hover {
  background: transparent;
}
.tab-container .nav-tabs > li.active > a {
  border: none;
  color: #E91E63 !important;
  background: transparent;
}
.tab-container .nav-tabs > li.active > a,
.tab-container .nav-tabs > li.active > a:focus,
.tab-container .nav-tabs > li.active > a:hover {
  border-width: 0;
}
.tab-container .nav-tabs > li#magic-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #E91E63;
}
.tab-container .tab-content {
  padding: 15px;
}