Home
Baraka Salvator
magic card

magic card

by salvator

This tailwind example is contributed by Baraka Salvator, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Baraka Salvator

793

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 Flip with Particles</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
          },
          colors: {
            primary: '#6366f1',
            secondary: '#a855f7',
            accent: '#ec4899',
            dark: '#1e293b',
            light: '#f8fafc',
          },
          animation: {
            'gradient-x': 'gradient-x 15s ease infinite',
            'fade-in': 'fadeIn 1s ease forwards',
            'float': 'float 6s ease-in-out infinite',
            'particle-float': 'particleFloat 8s linear infinite',
            'card-enter': 'cardEnter 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards',
            'text-glow': 'textGlow 3s ease-in-out infinite alternate',
          },
          keyframes: {
            'gradient-x': {
              '0%, 100%': { 'background-position': '0% 50%' },
              '50%': { 'background-position': '100% 50%' },
            },
            'fadeIn': {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' },
            },
            'float': {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' },
            },
            'particleFloat': {
              '0%': { transform: 'translateY(0) rotate(0deg)', opacity: '1' },
              '100%': { transform: 'translateY(-100vh) rotate(360deg)', opacity: '0' },
            },
            'cardEnter': {
              '0%': { transform: 'scale(0.5) rotateY(180deg)', opacity: '0' },
              '100%': { transform: 'scale(1) rotateY(0)', opacity: '1' },
            },
            'textGlow': {
              '0%': { 'text-shadow': '0 0 5px rgba(236, 72, 153, 0.5)' },
              '100%': { 'text-shadow': '0 0 20px rgba(236, 72, 153, 0.9)' },
            },
          },
          perspective: {
            '1000': '1000px',
          },
          transformStyle: {
            'preserve-3d': 'preserve-3d',
          },
          backfaceVisibility: {
            hidden: 'hidden',
          },
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .bg-gradient {
        @apply bg-gradient-to-r from-primary via-secondary to-accent bg-[length:400%_400%] animate-gradient-x;
      }
      .glass {
        @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg shadow-[0_8px_32px_0_rgba(31,38,135,0.15)];
      }
      .card-inner {
        transform-style: preserve-3d;
        transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
      .card-front, .card-back {
        backface-visibility: hidden;
      }
      .card-back {
        transform: rotateY(180deg);
      }
      .card-flipped .card-inner {
        transform: rotateY(180deg);
      }
      .particle {
        @apply absolute rounded-full pointer-events-none;
        background: radial-gradient(circle, rgba(236,72,153,0.8) 0%, rgba(99,102,241,0.5) 70%, transparent 100%);
      }
    }
  </style>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4 font-sans">
  <div class="relative w-full max-w-2xl">
    
    <div class="card-container perspective-1000 w-full h-96 md:h-[32rem] relative cursor-pointer group" id="card">
      
      <div class="card-inner w-full h-full relative" id="card-inner">
        
        <div class="card-front glass absolute inset-0 rounded-2xl overflow-hidden p-8 flex flex-col items-center justify-center">
          <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80')] bg-cover bg-center opacity-30"></div>
          
          <h2 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-text-glow relative z-10">
            Explore More
          </h2>
          <p class="text-white/80 text-lg md:text-xl mb-8 max-w-md text-center relative z-10">
            Click to discover what's behind this interactive experience
          </p>
          <div class="relative z-10">
            <button class="px-6 py-3 bg-white/20 backdrop-blur-md rounded-full text-white border border-white/30 hover:bg-white/30 transition-all duration-300 flex items-center gap-2 group-hover:scale-105">
              <span>Flip Card</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:rotate-180 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
              </svg>
            </button>
          </div>
          
          
          <div class="absolute top-8 left-8 w-16 h-16 rounded-full bg-accent/20 blur-xl animate-float"></div>
          <div class="absolute bottom-12 right-12 w-24 h-24 rounded-full bg-primary/20 blur-xl animate-float [animation-delay:2s]"></div>
        </div>
        
        
        <div class="card-back glass absolute inset-0 rounded-2xl overflow-hidden p-8 flex flex-col items-center justify-center">
          <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80')] bg-cover bg-center opacity-30"></div>
          
          <h2 class="text-4xl md:text-6xl font-bold text-white mb-4 relative z-10">
            Surprise!
          </h2>
          <p class="text-white/80 text-lg md:text-xl mb-8 max-w-md text-center relative z-10">
            You've unlocked an advanced interactive component with particle animations
          </p>
          
          <div class="relative z-10 grid grid-cols-3 gap-4 w-full max-w-sm">
            <div class="aspect-square bg-white/10 rounded-lg backdrop-blur-sm flex items-center justify-center hover:bg-accent/30 transition-all duration-300 hover:scale-105 border border-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <div class="aspect-square bg-white/10 rounded-lg backdrop-blur-sm flex items-center justify-center hover:bg-primary/30 transition-all duration-300 hover:scale-105 border border-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
              </svg>
            </div>
            <div class="aspect-square bg-white/10 rounded-lg backdrop-blur-sm flex items-center justify-center hover:bg-secondary/30 transition-all duration-300 hover:scale-105 border border-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
              </svg>
            </div>
          </div>
          
          
          <div class="absolute top-12 right-12 w-20 h-20 rounded-full bg-secondary/20 blur-xl animate-float [animation-delay:1s]"></div>
          <div class="absolute bottom-8 left-12 w-12 h-12 rounded-full bg-accent/20 blur-xl animate-float [animation-delay:3s]"></div>
        </div>
      </div>
    </div>
    
    
    <div class="absolute inset-0 overflow-hidden pointer-events-none z-0" id="particles-container"></div>
    
    
    <div class="mt-12 text-center text-white/60 animate-fade-in [animation-delay:1s]">
      <p>Click the card to flip it and trigger the particle animation</p>
    </div>
  </div>

Related Examples

chat bar
live chat

Author:
gidy

5 months ago

862
Maintenance page

Author:
Faye

10 months ago

1.5k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

5 months ago

511
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

5 months ago

573
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

5 months ago

349
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 months ago

946
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

5 months ago

841
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

5 months ago

443
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

6 days ago

17
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.7k
Simple layout

Author:
Edward Carandang

1 year ago

2.7k
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components