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

109

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

Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

2 months ago

208
Blog Author Card

Author:
EliteAI Tools

10 months ago

1k
Cards

Author:
Morris Muriuki Muthigani

4 months ago

655
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

Author:
CodewithFaraz

2 weeks ago

86
home
html , css

Author:
Hacker Development

6 months ago

1.7k
card profie
profile card

Author:
Aman kumar

1 year ago

4k
grid card

Author:
Md. Tofayel islam

1 year ago

1.4k
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.9k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

6 months ago

528
Image card with overlay text overlay

Author:
Santos78

2 years ago

31.6k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components