Voucher Card

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

Card

Author Adriano Monecchi

Tailwind v3.4 609 1

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://res.cloudinary.com/mrancho/image/upload/v1779592491/cardapio/2026/gagclydv1sqwvvpxkbcr.jpg" 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://res.cloudinary.com/mrancho/image/upload/v1779592491/cardapio/2026/gagclydv1sqwvvpxkbcr.jpg" 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

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

Nick Girga

1 year ago

1.2k
Active Beauty Main Page

Maxim

1 year ago

1.8k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

dev-fab250

1 year ago

1.4k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
Card Component Simple
This is a Card Component for simple use &full responsive

Shariar Hasan

2 years ago

3.5k
Monkey card
First tailwind example

muhittin budak

1 year ago

1.6k
Card with sale ribbon

Fagundo67

3 years ago

12.5k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.5k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
Profile card
tailwind Profile Card

Md. Tofayel islam

2 years ago

3.1k
Info cards

Samuel Dawson

3 years ago

11.6k