Untitled

<div class="adopt-a-pup-top-navigation">
        <div class="mdc-tab-bar" role="tablist">
          <div class="mdc-tab-scroller">
            <div class="mdc-tab-scroller__scroll-area">
              <div class="mdc-tab-scroller__scroll-content">

                <button class="mdc-tab mdc-tab--active adopt-a-pup-tab" role="tab" aria-selected="true" tabindex="0">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">Puppers</span>
                  </span>
                  <span class="mdc-tab-indicator mdc-tab-indicator--active adopt-a-pup-tab-indicator">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>

                <button class="mdc-tab adopt-a-pup-tab" role="tab" aria-selected="false" tabindex="-1">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">Doggos</span>
                  </span>
                  <span class="mdc-tab-indicator adopt-a-pup-tab-indicator">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>

                <button class="mdc-tab adopt-a-pup-tab" role="tab" aria-selected="false" tabindex="-1">
                  <span class="mdc-tab__content">
                    <span class="mdc-tab__text-label">Woofers</span>
                  </span>
                  <span class="mdc-tab-indicator adopt-a-pup-tab-indicator">
                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                  </span>
                  <span class="mdc-tab__ripple"></span>
                </button>

              </div>
            </div>
          </div>
        </div>
      </div>


//// css
.adopt-a-pup-top-navigation {
  display: flex;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.adopt-a-pup-tab {
  @include mdc-tab-text-label-color(white);
  @include mdc-tab-icon-color(white);

  .mdc-tab__ripple {
    @include mdc-states(white);
  }
}

.adopt-a-pup-tab-indicator {
  @include mdc-tab-indicator-underline-color(white);
}

//// javascript
const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar'));
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

tabBar.listen('MDCTabBar:activated', (activatedEvent) => {
  document.querySelectorAll('.adopt-a-pup-body').forEach((element, index) => {
    if (index === activatedEvent.detail.index) {
      element.classList.remove('adopt-a-pup-body--hidden');
    } else {
      element.classList.add('adopt-a-pup-body--hidden');
    }
  });
});