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

Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

3 months ago

521
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

11 months ago

1.1k
Cards section - Sport

Author:
ABDO-SY

11 months ago

2.5k
Tailwind image card with text above it

Author:
I.P. Leroy

2 years ago

25.3k
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

2 months ago

305
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

3 months ago

423
Card responsive and dark mode grid

Author:
Cristian

1 year ago

1.9k
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

1 month ago

325
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

10 months ago

1.8k
Animaitve card
Made a animative card using the html and the ccss

Author:
Sufyan jutt

2 weeks ago

38
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.8k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components