payement cart virtual

This tailwind example is contributed by Omer fils ELENGA, on 07-Mar-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card

Card Pricing Product

Author Omer fils ELENGA

Tailwind v3.4 434 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Interactive Payment Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');
        
        body { font-family: 'Space Grotesk', sans-serif; perspective: 1500px; }

/* Container de la carte pour la perspective */
        .card-perspective {
            perspective: 2000px;
            width: 100%;
            max-width: 400px;
            height: 250px;
            margin: 2rem auto;
        }

.card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.1s ease-out; /* Très rapide pour le tilt */
            transform-style: preserve-3d;
            cursor: pointer;
        }

/* Effet de reflet dynamique */
        .reflection-layer {
            position: absolute;
            inset: 0;
            z-index: 10;
            background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
            border-radius: 1.5rem;
            pointer-events: none;
            mix-blend-mode: soft-light;
        }

.card-front, .card-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

.card-front {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border: 1px solid rgba(212, 175, 55, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem;
        }

.card-back {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            transform: rotateY(180deg);
        }

/* Animation de la puce Gold */
        .chip {
            background: linear-gradient(135deg, #f2d472 0%, #d4af37 50%, #b8860b 100%);
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }

/* Effet de rotation si focus sur CVV */
        .is-flipped { transform: rotateY(180deg) !important; }
        
        .gold-glow {
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            color: #d4af37;
        }
    </style>
</head>
<body class="bg-slate-950 min-h-screen flex items-center justify-center p-6 text-slate-200">

<div class="flex justify-between items-end mt-4">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-slate-500 uppercase tracking-widest">Titulaire</span>
                            <span id="display-name" class="text-sm font-bold uppercase tracking-wider">VOTRE NOM</span>
                        </div>
                        <div class="flex flex-col text-right">
                            <span class="text-[10px] text-slate-500 uppercase tracking-widest">Expire</span>
                            <span id="display-expiry" class="text-sm font-bold">MM/AA</span>
                        </div>
                    </div>
                </div>

<div class="card-back flex flex-col justify-center">
                    <div class="w-full h-12 bg-black/80 my-4"></div>
                    <div class="px-8">
                        <div class="bg-slate-300 h-10 w-full flex items-center justify-end pr-4 rounded">
                            <span id="display-cvv" class="text-slate-900 font-bold tracking-widest">•••</span>
                        </div>
                        <p class="text-[8px] mt-4 text-slate-500 leading-tight">
                            Cette carte est strictement personnelle. Toute utilisation frauduleuse fera l'objet de poursuites. Gold Edition 2026.
                        </p>
                    </div>
                </div>
            </div>
        </div>

<div class="bg-slate-900/50 p-8 rounded-3xl border border-slate-800 backdrop-blur-xl">
            <h2 class="text-2xl font-bold mb-6 gold-glow">Paiement Sécurisé</h2>
            
            <div class="space-y-4">
                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase">Numéro de carte</label>
                    <input type="text" id="in-number" maxlength="19" class="w-full bg-slate-800 border-none rounded-xl p-3 mt-1 focus:ring-2 focus:ring-[#d4af37] outline-none" placeholder="0000 0000 0000 0000">
                </div>
                
                <div>
                    <label class="text-xs font-bold text-slate-500 uppercase">Nom du titulaire</label>
                    <input type="text" id="in-name" class="w-full bg-slate-800 border-none rounded-xl p-3 mt-1 focus:ring-2 focus:ring-[#d4af37] outline-none" placeholder="JEAN DUPONT">
                </div>

<div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase">Expiration</label>
                        <input type="text" id="in-expiry" maxlength="5" class="w-full bg-slate-800 border-none rounded-xl p-3 mt-1 focus:ring-2 focus:ring-[#d4af37] outline-none" placeholder="MM/AA">
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase">CVV</label>
                        <input type="text" id="in-cvv" maxlength="3" class="w-full bg-slate-800 border-none rounded-xl p-3 mt-1 focus:ring-2 focus:ring-[#d4af37] outline-none" placeholder="123">
                    </div>
                </div>

<button class="w-full bg-gradient-to-r from-[#b8860b] to-[#f2d472] text-slate-950 font-black py-4 rounded-xl mt-6 shadow-lg shadow-gold/20 hover:scale-[1.02] transition">
                    PAYER MAINTENANT
                </button>
            </div>
        </div>
    </div>

// --- EFFET TILT 3D ET REFLET ---
        cardContainer.addEventListener('mousemove', (e) => {
            const rect = cardContainer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

// Calcul de la rotation (intensifié pour l'effet 3D)
            const rotateY = ((x / rect.width) - 0.5) * 40; 
            const rotateX = ((y / rect.height) - 0.5) * -40;

cardInner.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

// Mise à jour du reflet (Glint)
            glint.style.setProperty('--x', `${x}px`);
            glint.style.setProperty('--y', `${y}px`);
            glint.style.opacity = '1';
        });

cardContainer.addEventListener('mouseleave', () => {
            cardInner.style.transform = `rotateX(0deg) rotateY(0deg)`;
            glint.style.opacity = '0';
        });

// --- MISE À JOUR DES DONNÉES EN TEMPS RÉEL ---
        const inputs = {
            number: document.getElementById('in-number'),
            name: document.getElementById('in-name'),
            expiry: document.getElementById('in-expiry'),
            cvv: document.getElementById('in-cvv')
        };

const displays = {
            number: document.getElementById('display-number'),
            name: document.getElementById('display-name'),
            expiry: document.getElementById('display-expiry'),
            cvv: document.getElementById('display-cvv')
        };

inputs.number.addEventListener('input', (e) => {
            let val = e.target.value.replace(/\s/g, '').replace(/\D/g, '');
            val = val.match(/.{1,4}/g)?.join(' ') || '';
            e.target.value = val;
            displays.number.innerText = val || '•••• •••• •••• ••••';
        });

inputs.name.addEventListener('input', (e) => {
            displays.name.innerText = e.target.value.toUpperCase() || 'VOTRE NOM';
        });

inputs.expiry.addEventListener('input', (e) => {
            let val = e.target.value.replace(/\D/g, '');
            if(val.length > 2) val = val.substring(0,2) + '/' + val.substring(2,4);
            e.target.value = val;
            displays.expiry.innerText = val || 'MM/AA';
        });

// Flip la carte pour le CVV
        inputs.cvv.addEventListener('focus', () => cardInner.classList.add('is-flipped'));
        inputs.cvv.addEventListener('blur', () => cardInner.classList.remove('is-flipped'));
        inputs.cvv.addEventListener('input', (e) => {
            displays.cvv.innerText = e.target.value || '•••';
        });
    </script>
</body>
</html>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

14.5k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

4.9k