Glowing Gradient Badge Pill with Icon

<div
  class="flex overflow-hidden bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-[#000000] to-[#000000]/5 w-fit border-white/10 border rounded-full mr-auto mb-8 ml-auto pt-2.5 pr-3 pb-2.5 pl-3 relative shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] backdrop-blur-sm gap-x-2 gap-y-3 items-center"
  style="box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; section:nth-of-type(3) &gt; div:nth-of-type(2) &gt; div:nth-of-type(3)">
  <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>
  <div
    class="flex w-6 h-6 rounded-full shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] items-center justify-center"
    style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles"
      class="lucide lucide-sparkles w-[14px] h-[14px]" style="width: 14px; height: 14px; color: rgb(255, 255, 255);">
      <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>
  </div>
  <span class="text-xs font-medium text-white tracking-wide">Services</span>
</div>