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

564

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

Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

691
Forgot password?
you can change password an time

Author:
gidy

6 months ago

539
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
Privacy Policy Page Template

Author:
Anonymous

11 months ago

1.5k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

2 months ago

552
Homepage event

Author:
Anonymous

4 months ago

498
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

6 months ago

631
3d element

Author:
Omer fils ELENGA

1 day ago

2
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.3k
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.6k
NFT Header with Hero

Author:
Abdul Baset Bappy

5 months ago

931
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

4 months ago

525

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components