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

672

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

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

9 months ago

852
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

9 months ago

607
Full Page loading overlay

Author:
Bunny

2 years ago

12.3k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

3 weeks ago

19
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.9k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

209
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

1 year ago

1.9k
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

7 months ago

972
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

9 months ago

1.1k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components