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

660

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

image

Author:
pablitodgb

5 months ago

425
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

5 months ago

1.1k
Team Members

Author:
Abdul Baset Bappy

6 months ago

881
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

8 months ago

637
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

7 months ago

1.5k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

11 months ago

1.6k
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Author:
Abdul Jabbar Al Nahid

2 months ago

151
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

5 months ago

980
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

7 months ago

742
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

7 months ago

1k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components