Gradient Pill Stepper with Tooltip

Multi-step progress bars are everywhere in onboarding flows, checkout processes, and project wizards. But most of them look the same — plain circles connected by a line. I built one that actually looks as good as it works. 🎁 What I Built Gradient Pill Stepper with Tooltip — a visually striking multi-step progress component featuring: ✅ Vibrant pink-purple gradient progress track ✅ Glassmorphism effects for completed steps ✅ Smooth width transitions as steps complete ✅ Animated floating tooltip showing active stage details ✅ "CURRENT GOAL" card with Edit functionality ✅ Checkmark icons for completed steps ✅ Numbered indicators for upcoming steps ✅ Built entirely with Tailwind CSS — zero UI libraries ✅ Perfect for onboarding flows, project wizards, and checkout processes See It in Action The Design Breakdown Gradient Progress Track The pink-to-purple gradient pill is the centerpiece — it fills smoothly as steps complete, giving users a satisfying sense of progress. Far more engaging than