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

185

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

Testimonial card with image

Author:
Simon Scheffer

2 years ago

12k
Features grid

Author:
Sophia Baker

2 years ago

10.1k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

6 months ago

927
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.7k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.3k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.8k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.7k
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

21k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

11 months ago

1.2k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

1 month ago

360
Article card

Author:
Sienna

3 years ago

12.6k
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components