Vercel like tabs with vue js and tailwindcss

index.vue

<template>
  <main class="py-24 bg-slate-50 min-h-screen">
    <div class="border-shadow">
      <div class="max-w-4xl mx-auto">
        <div ref="wrapper" class="flex items-center relative">
          <div
            ref="highlighter"
            class="bg-slate-200 absolute top-3 rounded-md h-8 transition-all duration-150"
            :style="highlightStyles"
          ></div>
          <n-link
            @mouseenter.native="action($event, tab)"
            v-for="tab in tabs"
            :key="tab.label"
            :to="tab.path"
            class="nav-link"
            >{{ tab.label }}</n-link
          >
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      tabBoundingBox: null,
      wrapperBoundingBox: null,
      highlightedTab: null,
      isHoveredFromNull: false,
      tabs: [
        {
          label: "Mine",
          path: "",
        },
        {
          label: "Unassigned",
          path: "#unassigned",
        },
        {
          label: "All",
          path: "#all",
        },
        {
          label: "Resolved",
          path: "#resolved",
        },
      ],
    };
  },
  methods: {
    action(el, tab) {
      const wrapper = this.$refs.wrapper;
      this.tabBoundingBox = el.target.getBoundingClientRect();
      this.wrapperBoundingBox = wrapper.getBoundingClientRect();
      this.isHoveredFromNull = !this.highlightedTab;
      this.highlightedTab = tab;
    },
  },
  computed: {
    highlightStyles() {
      if (this.highlightedTab) {
        const { left, width } = this.tabBoundingBox;
        const { left: wrapperLeft } = this.wrapperBoundingBox;
        const offset = left - wrapperLeft;
        return {
          transform: `translateX(${offset}px)`,
          width: `${width}px`,
        };
      }
    },
  },
};
</script>

<style>
.border-shadow {
  box-shadow: inset 0 -1px #eaeaea;
  transition: box-shadow 0.2s ease;
}

.nav-link {
  @apply p-4 relative;
}

.nuxt-link-exact-active::before {
  @apply block absolute h-0 bottom-0 border-b-2 border-slate-800 left-2.5 right-2.5 content-[''];
}
</style>