Home
Anonymous
visacardes

visacardes

Forked from> @dev-prince250/visacardes

I'll create professional Visa card components with realistic styling and multiple card types

This tailwind example is contributed by Anonymous, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

193

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Visa Cards</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

.card-number {
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 0.1em;
        }

.card-gradient-blue {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

.card-gradient-gold {
            background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
        }

.card-gradient-black {
            background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
        }

.card-gradient-platinum {
            background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
        }

.card-gradient-signature {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
        }

.card-gradient-infinite {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }

.chip {
            background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
            border: 1px solid #e6c200;
        }

.contactless {
            color: rgba(255, 255, 255, 0.8);
        }

.card-shadow {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
        }

.flip-card {
            perspective: 1000px;
        }

.flip-card-inner {
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

.flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

.flip-card-front,
        .flip-card-back {
            backface-visibility: hidden;
        }

.flip-card-back {
            transform: rotateY(180deg);
        }

.magnetic-strip {
            background: linear-gradient(90deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
        }
    </style>
</head>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">

<div class="flip-card">
                <div class="flip-card-inner relative">
                    
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-blue rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            
                            <div class="absolute inset-0 opacity-10">
                                <div class="absolute top-4 right-4 w-32 h-32 border-2 border-white rounded-full"></div>
                                <div class="absolute bottom-4 left-4 w-24 h-24 border border-white rounded-full"></div>
                            </div>

<div class="flex justify-between items-start mb-8">
                                <div class="chip w-12 h-10 rounded-lg"></div>
                                <div class="contactless">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
                                    </svg>
                                </div>
                            </div>

<div class="card-number text-2xl font-medium mb-6 tracking-wider">
                                4532 1234 5678 9012
                            </div>

<div class="flex justify-between items-end">
                                <div>
                                    <div class="text-xs opacity-80 mb-1">CARD HOLDER</div>
                                    <div class="font-medium">JOHN ALEXANDER DOE</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-80 mb-1">EXPIRES</div>
                                    <div class="font-medium">12/28</div>
                                </div>
                                <div class="text-right">
                                    <svg width="80" height="25" viewBox="0 0 80 25" fill="currentColor">
                                        <path d="M0 12.5L15 0v8h8v9h-8v8L0 12.5zm65 0L80 0v8h-8v9h8v8L65 12.5z" />
                                        <text x="40" y="16" text-anchor="middle" font-size="8"
                                            font-weight="bold">VISA</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="flip-card-back absolute inset-0">
                        <div class="card-gradient-blue rounded-2xl text-white card-shadow h-56 w-96 relative">
                            
                            <div class="magnetic-strip h-12 w-full mt-6"></div>

<div class="bg-white mx-6 mt-8 h-10 rounded flex items-center px-4">
                                <div class="text-gray-600 text-sm italic">John A. Doe</div>
                                <div class="ml-auto bg-gray-100 px-3 py-1 rounded text-xs text-gray-700 font-mono">
                                    123
                                </div>
                            </div>

<div class="px-6 mt-4 text-xs">
                                <p class="mb-2">For customer service call 1-800-VISA-911</p>
                                <p>See reverse for important information</p>
                            </div>

<div class="absolute bottom-4 right-6 text-xs opacity-80">
                                Valid only when signed
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="flip-card">
                <div class="flip-card-inner relative">
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-gold rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            <div class="absolute inset-0 opacity-20">
                                <div class="absolute top-8 right-8 w-28 h-28 border-2 border-white rounded-full"></div>
                                <div class="absolute bottom-8 left-8 w-20 h-20 border border-white rounded-full"></div>
                                <div
                                    class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 border border-white rounded-full">
                                </div>
                            </div>

<div class="flex justify-between items-end relative z-10">
                                <div>
                                    <div class="text-xs opacity-80 mb-1">CARD HOLDER</div>
                                    <div class="font-medium">SARAH MARIE WILSON</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-80 mb-1">EXPIRES</div>
                                    <div class="font-medium">06/29</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-bold">VISA</div>
                                    <div class="text-xs">GOLD</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="flip-card">
                <div class="flip-card-inner relative">
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-platinum rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            <div class="absolute inset-0 opacity-10">
                                <div
                                    class="absolute inset-0 bg-gradient-to-br from-transparent via-white to-transparent transform rotate-45">
                                </div>
                            </div>

<div class="flex justify-between items-end relative z-10">
                                <div>
                                    <div class="text-xs opacity-80 mb-1">CARD HOLDER</div>
                                    <div class="font-medium">MICHAEL ROBERT CHEN</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-80 mb-1">EXPIRES</div>
                                    <div class="font-medium">03/30</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-bold">VISA</div>
                                    <div class="text-xs">PLATINUM</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">

<div class="flip-card">
                <div class="flip-card-inner relative">
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-signature rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            <div class="absolute inset-0 opacity-20">
                                <div class="absolute top-4 left-4 w-16 h-16 bg-white rounded-full"></div>
                                <div class="absolute bottom-4 right-4 w-24 h-24 bg-white rounded-full"></div>
                                <div class="absolute top-1/2 right-8 w-8 h-8 bg-white rounded-full"></div>
                            </div>

<div class="flex justify-between items-end relative z-10">
                                <div>
                                    <div class="text-xs opacity-90 mb-1 font-light">CARD HOLDER</div>
                                    <div class="font-medium">EMMA CHARLOTTE SMITH</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-90 mb-1 font-light">EXPIRES</div>
                                    <div class="font-medium">09/31</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-lg font-bold tracking-wider">VISA</div>
                                    <div class="text-xs font-light opacity-90">SIGNATURE</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="flip-card">
                <div class="flip-card-inner relative">
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-black rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            <div class="absolute inset-0 opacity-5">
                                <div
                                    class="absolute inset-0 bg-gradient-to-tr from-gray-600 via-transparent to-gray-400">
                                </div>
                                <div class="absolute top-8 right-8 w-32 h-32 border border-gray-400 rounded-full"></div>
                            </div>

<div class="flex justify-between items-end relative z-10">
                                <div>
                                    <div class="text-xs opacity-70 mb-1 font-light">CARD HOLDER</div>
                                    <div class="font-light text-sm">DAVID ALEXANDER JOHNSON</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-70 mb-1 font-light">EXPIRES</div>
                                    <div class="font-light">11/32</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-xl font-bold tracking-wider">VISA</div>
                                    <div class="text-xs font-light opacity-80">BLACK</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="flip-card">
                <div class="flip-card-inner relative">
                    <div class="flip-card-front">
                        <div
                            class="card-gradient-infinite rounded-2xl p-8 text-white card-shadow relative overflow-hidden h-56 w-96">
                            <div class="absolute inset-0 opacity-10">
                                <div class="absolute top-0 left-0 w-full h-full">
                                    <div class="absolute top-4 right-4 w-20 h-20 border border-blue-300 rounded-full">
                                    </div>
                                    <div class="absolute bottom-8 left-8 w-16 h-16 border border-blue-300 rounded-full">
                                    </div>
                                    <div
                                        class="absolute top-1/2 left-1/3 w-12 h-12 border border-blue-300 rounded-full">
                                    </div>
                                    <div class="absolute top-8 left-1/2 w-6 h-6 bg-blue-300 rounded-full"></div>
                                </div>
                            </div>

<div class="flex justify-between items-end relative z-10">
                                <div>
                                    <div class="text-xs opacity-80 mb-1 font-light text-blue-200">CARD HOLDER</div>
                                    <div class="font-light text-sm">OLIVIA GRACE MARTINEZ</div>
                                </div>
                                <div>
                                    <div class="text-xs opacity-80 mb-1 font-light text-blue-200">EXPIRES</div>
                                    <div class="font-light">08/33</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-xl font-bold tracking-wider">VISA</div>
                                    <div class="text-xs font-light opacity-90 text-blue-200">INFINITE</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-white rounded-2xl shadow-xl p-8 mt-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Card Management</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-700">Quick Actions</h3>
                    <button class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium">
                        <i class="fas fa-lock mr-2"></i>Lock Card
                    </button>
                    <button class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition-colors font-medium">
                        <i class="fas fa-eye mr-2"></i>View Statement
                    </button>
                    <button class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                        <i class="fas fa-cog mr-2"></i>Card Settings
                    </button>
                </div>

<div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-700">Recent Transactions</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-medium text-gray-800">Amazon Purchase</div>
                                <div class="text-sm text-gray-600">May 22, 2025</div>
                            </div>
                            <div class="text-red-600 font-semibold">-$89.99</div>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-medium text-gray-800">Salary Deposit</div>
                                <div class="text-sm text-gray-600">May 20, 2025</div>
                            </div>
                            <div class="text-green-600 font-semibold">+$3,500.00</div>
                        </div>
                        <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-medium text-gray-800">Gas Station</div>
                                <div class="text-sm text-gray-600">May 19, 2025</div>
                            </div>
                            <div class="text-red-600 font-semibold">-$45.20</div>
                        </div>
                    </div>
                </div>

<div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-700">This Month</h3>
                    <div class="space-y-4">
                        <div class="p-4 border border-gray-200 rounded-lg">
                            <div class="text-2xl font-bold text-gray-800">$2,847.32</div>
                            <div class="text-sm text-gray-600">Total Spent</div>
                        </div>
                        <div class="p-4 border border-gray-200 rounded-lg">
                            <div class="text-2xl font-bold text-green-600">$15,240.68</div>
                            <div class="text-sm text-gray-600">Available Credit</div>
                        </div>
                        <div class="p-4 border border-gray-200 rounded-lg">
                            <div class="text-2xl font-bold text-blue-600">47</div>
                            <div class="text-sm text-gray-600">Transactions</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Simulate card number masking
            const cardNumbers = document.querySelectorAll('.card-number');
            let isRevealed = false;
            
            cardNumbers.forEach(cardNumber => {
                const originalNumber = cardNumber.textContent;
                const maskedNumber = originalNumber.replace(/\d(?=\d{4})/g, '•');
                
                cardNumber.addEventListener('mouseenter', function() {
                    if (!isRevealed) {
                        this.textContent = originalNumber;
                    }
                });
                
                cardNumber.addEventListener('mouseleave', function() {
                    if (!isRevealed) {
                        this.textContent = maskedNumber;
                    }
                });
                
                // Set initial state to masked
                cardNumber.textContent = maskedNumber;
            });
        });
    </script>
</body>

</html>

Related Examples

templete
templete

Author:
Uwera Dorcas

1 month ago

197
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.9k
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

9 hours ago

4
pages / slides

Author:
MD Fardous Alom

6 months ago

744
htmlcss0

Author:
Anonymous

3 weeks ago

66
Snake Game tailwind
snake game

Author:
QQ-VVN

2 months ago

293
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

2 months ago

235
magic card
by salvator

Author:
Baraka Salvator

2 months ago

333
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.8k
image

Author:
pablitodgb

2 weeks ago

27
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

1 month ago

272
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components