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

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

Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

2 months ago

394
cards
cards with background animation

Author:
Anonymous

1 year ago

10.6k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

2 months ago

321
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

4 months ago

783
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

4 months ago

889
Half filled circle with tailwind

Author:
Alok

2 years ago

12.7k
Glassmorphism form

Author:
Sophia Baker

2 years ago

16.6k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.8k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

1 month ago

270
profile
user profile

Author:
gidy

3 days ago

3
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

2 weeks ago

117
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

1 month ago

147

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components