✳️ 581+ Pro Blocks, lifetime updates, unlimited projects — Get 50+ fresh blocks every month ✳️ 👇
Grab the deal →

Coupon Code Card

Free

Tailwind CSS coupon code component

Coupon Code Card Image 1
Details About Coupon Code Card
Key points:
  • Copy & Paste
  • Tailwind CSS v4
<!-- Tailwind CSS v4 Coupon Code Card -->
<div class="max-w-sm mx-auto bg-white border border-gray-200 rounded-lg shadow-md p-6">
  <h2 class="text-2xl font-semibold text-gray-800 mb-2">Exclusive Offer</h2>
  <p class="text-gray-600 mb-4">Enjoy a special discount on your next purchase with the coupon below.</p>

  <div class="flex items-center justify-between bg-gray-100 border border-gray-300 rounded-md px-4 py-2 mb-4">
    <code class="font-mono text-lg text-gray-800">SAVE20</code>
    <button
      class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      onclick="navigator.clipboard.writeText('SAVE20')"
    >
      Copy Code
    </button>
  </div>

  <p class="text-sm text-gray-500">Expires on <time datetime="2025-06-30">June 30, 2025</time></p>
</div>

Customizable Coupon Code Card styled with Tailwind CSS v4.

It includes:

  • Header & description

  • Coupon badge with a copy-to-clipboard button

  • Expiration date

You can tweak colors, padding, or text to fit your design.

Featured Tailwind Components

Best Tailwind components and elements to use on your web projects.

FlyonUI HOT

The Easiest Component Library for Tailwind CSS

Shadcnblocks

Hundreds of premium components & blocks built for Tailwind & Shadcn UI

Oxbow UI HOT

220+ Free & Premium Tailwind, Alpine.js components