<style>
  .tabs {
    display: flex;
    gap: 8px;
    width: fit-content;
  }

  .tab {
    padding: 8px 16px;
    border: none;
    background: none;
    border-radius: 999rem;
    font-size: 16px;
    color: #71717a;
    cursor: pointer;
    position: relative;
    font-weight: 500;
  }

  .tab.active {
    color: #ffffff;
  }

  .tab.active::before {
    content: "";
    position: absolute;
    height: 100%;
    inset: 0;
    background: #000;
    border-radius: inherit;
    z-index: -1;
  }

  ::view-transition-group(*) {
    animation-duration: 0.5s;
    animation-timing-function: linear(
      0,
      0.186 3.5%,
      0.352 7.1%,
      0.496 10.8%,
      0.623 14.7%,
      0.679 16.7%,
      0.732 18.8%,
      0.78 20.9%,
      0.821 23%,
      0.86 25.2%,
      0.895 27.5%,
      0.925 29.8%,
      0.951 32.2%,
      0.97 34.2%,
      0.986 36.3%,
      1 38.5%,
      1.012 40.7%,
      1.021 43%,
      1.028 45.4%,
      1.033 48%,
      1.036 50.7%,
      1.037 54.8%,
      1.034 59.6%,
      1.012 76.6%,
      1.004 84.2%,
      1.001 91.3%,
      1
    );
  }

  ::view-transition-group(tab-1),
  ::view-transition-group(tab-2),
  ::view-transition-group(tab-3),
  ::view-transition-group(tab-4) {
    z-index: 1;
  }

  ::view-transition-new(*),
  ::view-transition-old(*) {
    height: 100%;
  }

  .tab::before {
    view-transition-name: tab-background;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const tabs = document.querySelectorAll(".tab")

    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        document.startViewTransition(() => {
          document.querySelector(".tab.active").classList.remove("active")
          tab.classList.add("active")
        })
      })
    })
  })
</script>

<div class="tabs">
  <button class="tab active" style="view-transition-name: tab-1">Home</button>
  <button class="tab" style="view-transition-name: tab-2">Interactions</button>
  <button class="tab" style="view-transition-name: tab-3">Resources</button>
  <button class="tab" style="view-transition-name: tab-4">Docs</button>
</div>