Home
Adriano Monecchi
Voucher Card

Voucher Card

This tailwind example is contributed by Adriano Monecchi, on 13-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Adriano Monecchi

187

Fork Fullscreen

<section id="vouchers"
    class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 justify-items-center justify-center gap-y-10 gap-x-6 mt-10 mb-5">

<div class="relative bg-white rounded-md max-w-xs w-full p-6 border border-default rounded-base shadow-xs transform duration-500 hover:-translate-y-2 select-none">
        <div class="flex flex-col items-center">
            <img class="w-24 h-24 mb-6 rounded-full" src="https://gzietvuvfotgwwpqkhqb.supabase.co/storage/v1/object/public/campaign-images/campaigns/1754004543463.png" alt="1x Pizza Grande 6 Fatias"/>
            <h5 class="mb-0.5 text-xl font-semibold tracking-tight text-heading">1x Pizza Grande 6 Fatias</h5>
            <span class="text-sm text-body">disponível para resgate</span>
            <div class="flex w-full mt-4 md:mt-6 gap-4">
                <button type="button" class="flex justify-center items-center bg-white hover:bg-green-500 text-green-500 hover:text-white border border-2 border-dashed border-green-500 rounded w-full hover:bg-green-600 focus:ring-4 focus:ring-green-50 shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none duration-500 hover:scale-105">
                <svg class="w-4 h-4 me-1.5 -ms-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M48,208H16a8,8,0,0,1-8-8V160a8,8,0,0,1,8-8H48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M112,160h32l67-15.41a16.61,16.61,0,0,1,21,16h0a16.59,16.59,0,0,1-9.18,14.85L184,192l-64,16H48V152l25-25a24,24,0,0,1,17-7H140a20,20,0,0,1,20,20h0a20,20,0,0,1-20,20Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="24" x2="192" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="224 72 192 104 160 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                Resgatar
            </button>
            </div>
        </div>
    </div>

<div class="relative bg-white rounded-md max-w-xs w-full p-6 border border-default rounded-base shadow-xs">
        <div class="flex flex-col items-center">
            <img class="w-24 h-24 mb-6 rounded-full" src="https://gzietvuvfotgwwpqkhqb.supabase.co/storage/v1/object/public/campaign-images/campaigns/1754004543463.png" alt="1x Pizza Grande 6 Fatias"/>
            <h5 class="mb-0.5 text-xl font-semibold tracking-tight text-heading">1x Pizza Grande 6 Fatias</h5>
            <span class="text-sm text-body">disponível para resgate</span>
            <div class="flex w-full mt-4 md:mt-6 gap-4">
                <button type="button" class="flex justify-center items-center bg-white text-green-600 border border-2 border-dashed border-green-600 rounded w-full box-border hover:bg-brand-strong focus:ring-4 focus:ring-green-50 shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none duration-500 hover:scale-105">
                <svg class="w-4 h-4 me-1.5 -ms-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M48,208H16a8,8,0,0,1-8-8V160a8,8,0,0,1,8-8H48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M112,160h32l67-15.41a16.61,16.61,0,0,1,21,16h0a16.59,16.59,0,0,1-9.18,14.85L184,192l-64,16H48V152l25-25a24,24,0,0,1,17-7H140a20,20,0,0,1,20,20h0a20,20,0,0,1-20,20Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="24" x2="192" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="224 72 192 104 160 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                Resgatar
            </button>
            </div>
        </div>
    </div>

</div>

Related Examples

Pokemon!
Cool Pokemon card!

Author:
Crimson

1 year ago

1.5k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.3k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.9k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

142
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

2 months ago

390
card Alert - icons - glass

Author:
ABDO-SY

10 months ago

1k
Coming Soon Page

Author:
Conan Hilton

3 years ago

10.2k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.7k
Watch Card
Watch Cards

Author:
Anonymous

1 year ago

2k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.5k
item - product card

Author:
ABDO-SY

10 months ago

965
Department Card

Author:
Ashok Kumar

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components