<span class="absolute bottom-full left-1/2 -translate-x-1/2 pointer-events-none select-none">
  <div class="relative z-[999] bg-item rounded-full">
    <div class="relative text-white p-[10px] whitespace-nowrap text-base font-normal leading-[.8] rounded-full">
      <slot />
    </div>
  </div>
</span>

<style lang="postcss">
  span::after {
    @apply content-[''] absolute top-full left-1/2 -ml-[5px] border-[5px] border-solid border-transparent border-t-item;
  }

  div {
    @apply before:rounded-[32px] before:w-full before:h-full before:top-0 before:left-0 before:z-[-1] before:content-[''] before:absolute before:border before:border-transparent;
  }

  div::before {
    background: linear-gradient(#25292c, theme('colors.item')) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
</style>
