I've created a premium badge component with:

3 Colors Used:

• Amber/Yellow: Primary gradient background (from-amber-400 via-yellow-500 to-orange-500)
• White: For the crown icon and "Premium" text
• White/Transparent: For the separator line and "days left" text

Features:

• Crown icon from Lucide React
• "Premium" text with bold styling
• Remaining days counter
• Gradient background with premium gold/amber colors
• Visual separator between sections
• Responsive design with proper spacing
• Shadow for depth

The badge accepts a remainingDays prop to display the countdown dynamically. The design uses a luxurious gold gradient that's commonly associated with premium services.

I've created a much more compact premium badge system with multiple variants:

Compact Features:

• Smaller padding and spacing
• Abbreviated "days" to "d"
• Reduced icon size (w-3 h-3)
• Tighter gap between elements

5 Badge Variants:

• Premium: Gold gradient with Crown icon
• Pro: Purple gradient with Zap icon
• Basic: Blue gradient with Star icon
• Warning: Red gradient with AlertTriangle icon
• Expired: Gray gradient with X icon

3 Style Options:

• Default: Standard padding and rounded corners
• Minimal: Smallest size for tight spaces
• Pill: Fully rounded for modern look

3-Color System per variant:

• Gradient background (primary colors)
• White text/icons (secondary)
• Semi-transparent white for separators/secondary text (tertiary)

The badges are now much more space-efficient and perfect for headers, sidebars, or inline usage!