Pricing badge / callout

Create a slim promo callout with Tailwind CSS: a full-width rounded bar with a gradient or solid accent background, a short bold message, a supporting phrase, and an inline arrow link. Great for announcements or limited-time offers.

<div class="mx-auto max-w-4xl px-6 py-8">
  <a href="#" class="group flex items-center justify-between gap-4 rounded-2xl bg-gradient-to-r from-indigo-600 to-violet-600 px-6 py-4 text-white">
    <div>
      <p class="font-semibold">Spring sale — 30% off annual plans</p>
      <p class="text-sm text-white/80">Offer ends April 30. Applied automatically at checkout.</p>
    </div>
    <span class="shrink-0 text-lg transition group-hover:translate-x-1">→</span>
  </a>
</div>