Swipe card fully animative

@sufyandevs #sufyandevs #sufyandev #shanwebdev

This tailwind example is contributed by Sufyan jutt, on 05-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Transitions

Card Animation

Author Sufyan jutt

Tailwind v3.4 1.7k 7

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Card Stack Swiper</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        .card-stack {
            perspective: 1500px;
            height: 500px;
            position: relative;
            width: 100%;
            margin: 0 auto;
        }
        
        .card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            transform-style: preserve-3d;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
        }
        
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 24px;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            padding: 30px;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .card-back {
            transform: rotateY(180deg);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        /* Card positioning in stack */
        .card.active {
            z-index: 10;
            transform: translateX(0) scale(1) rotateY(0deg);
        }
        
        .card.next {
            z-index: 9;
            transform: translateX(30px) scale(0.95) rotateY(-5deg);
            opacity: 0.9;
            filter: brightness(0.9);
        }
        
        .card.next-2 {
            z-index: 8;
            transform: translateX(60px) scale(0.9) rotateY(-10deg);
            opacity: 0.7;
            filter: brightness(0.8);
        }
        
        .card.next-3 {
            z-index: 7;
            transform: translateX(90px) scale(0.85) rotateY(-15deg);
            opacity: 0.5;
            filter: brightness(0.7);
        }
        
        .card.previous {
            z-index: 9;
            transform: translateX(-30px) scale(0.95) rotateY(5deg);
            opacity: 0.9;
            filter: brightness(0.9);
        }
        
        .card.previous-2 {
            z-index: 8;
            transform: translateX(-60px) scale(0.9) rotateY(10deg);
            opacity: 0.7;
            filter: brightness(0.8);
        }
        
        .card.previous-3 {
            z-index: 7;
            transform: translateX(-90px) scale(0.85) rotateY(15deg);
            opacity: 0.5;
            filter: brightness(0.7);
        }
        
        .card.hidden {
            opacity: 0;
            transform: scale(0.8);
            z-index: 1;
        }
        
        .card.swipe-left {
            transform: translateX(-150%) rotateZ(-30deg) scale(0.8);
            opacity: 0;
        }
        
        .card.swipe-right {
            transform: translateX(150%) rotateZ(30deg) scale(0.8);
            opacity: 0;
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .bounce-in {
            animation: bounceIn 0.8s ease-out;
        }
        
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-gradient-1 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .card-gradient-2 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .card-gradient-3 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        .card-gradient-4 {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
        
        .card-gradient-5 {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .card-gradient-6 {
            background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
        }
        
        .progress-dot {
            transition: all 0.3s ease;
        }
        
        .progress-dot.active {
            transform: scale(1.3);
        }
        
        .swipe-hint {
            animation: swipeHint 2s ease-in-out infinite;
        }
        
        @keyframes swipeHint {
            0%, 100% { transform: translateX(0); opacity: 0.7; }
            50% { transform: translateX(20px); opacity: 1; }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-lg w-full">
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-white mb-2">3D Card Stack</h1>
            <p class="text-white/80">Click or swipe to navigate through the cards</p>
            
            
            <div class="flex justify-center mt-6 space-x-3">
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="0"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="1"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="2"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="3"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="4"></div>
                <div class="progress-dot w-3 h-3 rounded-full bg-white/30" data-index="5"></div>
            </div>
        </div>
        
        
        <div class="card-stack mb-8">
            
            <div class="card active bounce-in card-gradient-1" data-index="0">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Featured</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-globe-americas text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Travel Explorer</h2>
                        <p class="text-center text-white/80">Discover amazing destinations around the world with our travel guides.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Details</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Travel Features</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Interactive maps</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Local experiences</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Travel itineraries</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next card-gradient-2" data-index="1">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">New</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-music text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Music Experience</h2>
                        <p class="text-center text-white/80">Immerse yourself in high-quality audio with our premium music service.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Features</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">What's Included</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Lossless audio quality</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Curated playlists</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Offline listening</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next-2 card-gradient-3" data-index="2">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Popular</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-utensils text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Culinary Journey</h2>
                        <p class="text-center text-white/80">Explore world cuisines with step-by-step recipes from master chefs.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Recipes</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">What You Get</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>1000+ recipes</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Video tutorials</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Grocery list generator</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card next-3 card-gradient-4" data-index="3">
                <div class="card-front text-white flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Trending</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-hiking text-6xl"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Adventure Awaits</h2>
                        <p class="text-center text-white/80">Find and book unique outdoor experiences with expert guides.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-white/20 px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Activities</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Adventure Types</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Mountain hiking</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Water sports</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Wildlife safaris</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card hidden card-gradient-5" data-index="4">
                <div class="card-front text-gray-800 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-black/10 px-3 py-1 rounded-full text-sm">Learning</span>
                        <button class="flip-btn bg-black/10 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-graduation-cap text-6xl text-purple-500"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Skill Mastery</h2>
                        <p class="text-center text-gray-600">Learn new skills with our interactive courses and expert instructors.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-black/10 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-purple-500 text-white px-4 py-2 rounded-full flex items-center">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Courses</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Learning Paths</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Web development</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Data science</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Digital marketing</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            
            <div class="card hidden card-gradient-6" data-index="5">
                <div class="card-front text-gray-800 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-black/10 px-3 py-1 rounded-full text-sm">Final</span>
                        <button class="flip-btn bg-black/10 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center items-center">
                        <div class="floating mb-6">
                            <i class="fas fa-gem text-6xl text-purple-500"></i>
                        </div>
                        <h2 class="text-3xl font-bold mb-2 text-center">Premium Access</h2>
                        <p class="text-center text-gray-600">Unlock all features with our premium membership plan.</p>
                    </div>
                    
                    <div class="mt-4 flex justify-between">
                        <button class="swipe-left-btn bg-black/10 px-4 py-2 rounded-full flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button class="swipe-right-btn bg-purple-500 text-white px-4 py-2 rounded-full flex items-center pulse">
                            Upgrade <i class="fas fa-crown ml-2"></i>
                        </button>
                    </div>
                </div>
                
                <div class="card-back text-white bg-blue-800/90 flex flex-col">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-white/20 px-3 py-1 rounded-full text-sm">Benefits</span>
                        <button class="flip-btn bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 flex flex-col justify-center">
                        <h2 class="text-2xl font-bold mb-4">Premium Features</h2>
                        <ul class="space-y-3">
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Ad-free experience</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Exclusive content</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check-circle mr-3 text-green-300"></i>
                                <span>Priority support</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="flex justify-center space-x-6 mb-8">
            <button id="prev-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300">
                <i class="fas fa-chevron-left text-xl"></i>
            </button>
            <button id="flip-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300">
                <i class="fas fa-sync-alt text-xl"></i>
            </button>
            <button id="next-btn" class="bg-white/20 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-white/30 transition-all duration-300 swipe-hint">
                <i class="fas fa-chevron-right text-xl"></i>
            </button>
        </div>
        
        
        <div class="text-center text-white/70 text-sm">
            <p><i class="fas fa-mouse-pointer mr-2"></i> Click buttons or swipe to navigate</p>
            <p><i class="fas fa-sync-alt mr-2"></i> Click the flip icon to see card details</p>
            <p><i class="fas fa-layer-group mr-2"></i> See cards behind the active one</p>
        </div>
    </div>

Related Examples

profile card
card

Tofayel Islam

9 months ago

195
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Brand Grid with Hover Effect

ariaw

1 year ago

2k
Voucher Card

Adriano Monecchi

10 months ago

605
Animated cards

Michael Andreuzza

2 years ago

7.4k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

farid

11 months ago

783
Features

Michael Andreuzza

2 years ago

5.6k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k
Form package

Hunter Guru

2 years ago

3k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Bonimater

1 year ago

1.5k
dismissible cookie banner with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.9k
Card with sale ribbon

Fagundo67

3 years ago

12.4k