Small promo strip
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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
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>