Home
Omer fils ELENGA
tinderclone By omerlinks

tinderclone By omerlinks

This tailwind example is contributed by Omer fils ELENGA, on 04-Jan-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Header Carousel Hero Comment Section Landing Page Range Slider

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, maximum-scale=1.0, user-scalable=no">
    <title>Tinder Clone By OmerLinks</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        body {
            background-color: #f3f3f3;
            /* Empêcher le scroll global sur mobile pour mieux swiper */
            overflow: hidden; 
            touch-action: none;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

/* Nom gradient style Tinder */
        .name-gradient {
            background: linear-gradient(to right, #fd297b, #ff655b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* Cache le défilement */
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="h-screen w-screen flex flex-col items-center justify-center relative">

<div class="absolute top-0 w-full h-full pointer-events-none z-0">
        <div class="absolute top-[-10%] right-[-10%] w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50"></div>
        <div class="absolute bottom-[-10%] left-[-10%] w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50"></div>
    </div>

<nav class="absolute top-0 w-full h-20 flex items-center justify-between px-6 z-50">
        <div class="text-[#fbb03b] text-2xl font-extrabold tracking-tight">tinder<span class="text-[#fd297b]">clone BY</span> Omerlinks</div>
        <div class="flex gap-6 text-gray-500">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <svg class="w-6 h-6 text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        </div>
    </nav>

<div id="card-stack" class="relative w-full max-w-sm aspect-[3/4] z-10">
        
    </div>

<div class="absolute bottom-8 w-full max-w-md flex justify-between items-center  px-8 z-20">
        <button id="btn-nope" class="w-14 h-14 rounded-full border border-gray-200 bg-white shadow-md flex items-center justify-center hover:scale-110 active:scale-95 transition text-red-500">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        
        <button id="btn-undo" class="w-10 h-10 rounded-full border border-gray-200 bg-white shadow-md flex items-center justify-center hover:scale-110 active:scale-95 transition text-yellow-500">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path></svg>
        </button>

// --- VARIABLES GLOBALES ---
        const cardStack = document.getElementById('card-stack');
        let cardData = [...profiles]; // Copie des données
        let swipedCards = []; // Stocke les cartes rejetées pour le bouton Undo

// --- INITIALISATION ---
        function init() {
            renderCards();
            attachButtonListeners();
        }

// --- CRÉATION DES CARTES ---
        function renderCards() {
            cardStack.innerHTML = '';
            // On affiche les 2 dernières cartes (l'une sur l'autre) pour la pile
            const cardsToShow = cardData.slice(-2).reverse(); 
            
            cardsToShow.forEach((profile, index) => {
                const card = createCardElement(profile);
                cardStack.appendChild(card);
                
                // Seule la première carte (celle du dessus) est interactive
                if (index === 0) {
                    setupCardInteractions(card);
                }
            });
        }

// Crée le DOM d'une carte
        function createCardElement(profile) {
            const el = document.createElement('div');
            el.className = 'card absolute top-0 left-0 w-full h-full bg-white rounded-2xl shadow-2xl overflow-hidden select-none touch-none cursor-grab';
            el.style.willChange = 'transform'; // Optimisation perf

el.innerHTML = `
                <div class="relative w-full h-full pointer-events-none">
                    <img src="${profile.img}" class="absolute inset-0 w-full h-full object-cover">
                    
                    
                    <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 via-black/40 to-transparent p-6 pt-24 text-white">
                        <h2 class="text-3xl font-bold mb-1 flex items-center gap-2">
                            ${profile.name} <span class="text-xl font-normal text-gray-200">${profile.age}</span>
                        </h2>
                        <p class="text-sm font-medium text-gray-100">${profile.bio}</p>
                    </div>

<div class="stamp stamp-like absolute top-16 left-8 border-4 border-green-500 text-green-500 text-6xl font-extrabold uppercase tracking-wider px-4 py-2 rounded-lg opacity-0 transform -rotate-12">
                        LIKE
                    </div>
                    <div class="stamp stamp-nope absolute top-16 right-8 border-4 border-red-500 text-red-500 text-6xl font-extrabold uppercase tracking-wider px-4 py-2 rounded-lg opacity-0 transform rotate-12">
                        NOPE
                    </div>
                </div>
            `;
            return el;
        }

// --- LOGIQUE DE DRAG / SWIPE (Cœur du système) ---
        function setupCardInteractions(card) {
            let isDragging = false;
            let startPos = { x: 0, y: 0 };
            let currentPos = { x: 0, y: 0 };

const likeStamp = card.querySelector('.stamp-like');
            const nopeStamp = card.querySelector('.stamp-nope');

// Helpers pour Touch & Mouse unifiés
            const getPos = (e) => e.touches ? e.touches[0] : e;

function onStart(e) {
                isDragging = true;
                startPos = { x: getPos(e).clientX, y: getPos(e).clientY };
                gsap.killTweensOf(card); // Stopper les animations en cours
                card.style.cursor = 'grabbing';
            }

function onMove(e) {
                if (!isDragging) return;
                // Empêcher le scroll mobile pendant le drag
                if(e.cancelable) e.preventDefault();

const x = getPos(e).clientX;
                const y = getPos(e).clientY;
                currentPos.x = x - startPos.x;
                currentPos.y = y - startPos.y;

// 1. Rotation en fonction du X
                const rotation = currentPos.x * 0.1; // 10% du déplacement = angle

// 2. Mise à jour position et rotation via GSAP pour la fluidité (pour le rendu, pas pour l'anim)
                gsap.set(card, { 
                    x: currentPos.x, 
                    y: currentPos.y, 
                    rotation: rotation 
                });

// 3. Calcul opacité des Stamps
                const opacity = Math.min(Math.abs(currentPos.x) / 100, 1); // Max 1
                if (currentPos.x > 0) {
                    likeStamp.style.opacity = opacity;
                    nopeStamp.style.opacity = 0;
                } else {
                    nopeStamp.style.opacity = opacity;
                    likeStamp.style.opacity = 0;
                }
            }

function onEnd() {
                if (!isDragging) return;
                isDragging = false;
                card.style.cursor = 'grab';

const threshold = 100; // Distance min pour valider le swipe

if (currentPos.x > threshold) {
                    swipeCard(card, 'like');
                } else if (currentPos.x < -threshold) {
                    swipeCard(card, 'nope');
                } else {
                    // Retour au centre (Spring back)
                    gsap.to(card, { x: 0, y: 0, rotation: 0, duration: 0.3, ease: "back.out(1.7)" });
                    gsap.to('.stamp', { opacity: 0, duration: 0.2 });
                }
            }

// Écouteurs Souris
            card.addEventListener('mousedown', onStart);
            window.addEventListener('mousemove', onMove);
            window.addEventListener('mouseup', onEnd);

// Écouteurs Tactiles (Mobile)
            card.addEventListener('touchstart', onStart, {passive: false});
            window.addEventListener('touchmove', onMove, {passive: false});
            window.addEventListener('touchend', onEnd);
        }

// --- ANIMATION DE SORTIE ---
        function swipeCard(card, direction) {
            const xMove = direction === 'like' ? window.innerWidth : -window.innerWidth;
            const rotation = direction === 'like' ? 45 : -45;

// Animer la carte hors écran
            gsap.to(card, {
                x: xMove,
                rotation: rotation,
                duration: 0.5,
                ease: "power2.in",
                onComplete: () => {
                    // Supprimer du DOM et des données
                    card.remove();
                    const removedProfile = cardData.pop();
                    swipedCards.push(removedProfile); // Pour le bouton Undo
                    
                    // Recharger la carte suivante si dispo
                    if (cardData.length > 0) renderCards();
                }
            });
        }

// --- BOUTONS D'ACTIONS ---
        function attachButtonListeners() {
            const currentCardSelector = () => document.querySelector('#card-stack > .card:last-child');
            
            document.getElementById('btn-like').addEventListener('click', () => {
                const card = currentCardSelector();
                if (card) swipeCard(card, 'like');
            });

document.getElementById('btn-nope').addEventListener('click', () => {
                const card = currentCardSelector();
                if (card) swipeCard(card, 'nope');
            });

// Lancement
        init();

</script>
</body>
</html>

Related Examples

Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.6k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Hero

Author:
Aman kumar

1 year ago

6.9k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.7k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.2k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.7k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14.6k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.8k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.7k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components