Animated Pill Badge with Icon

<div
  class="inline-flex gap-2 slide-in-right overflow-hidden text-xs text-white/80 bg-[#000000]/5 border-white/10 border rounded-full mb-4 pt-2 pr-3 pb-2 pl-3 backdrop-blur gap-x-2 gap-y-2 items-center"
  style="animation-play-state: running;">
  <span class="inline-flex items-center justify-center text-violet-400 bg-violet-600/20 w-6 h-6 rounded-full">
            <!-- Subtle purple gradient line -->
    <div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0" style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
          </span>
  About NovaForge
</div>