Home
Omer fils ELENGA
payement cart virtual

payement cart virtual

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

Card Pricing Product

Author Omer fils ELENGA

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