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

854

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

background animation
background animation

Author:
Jayendra Madara

1 year ago

3k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

Author:
INGRIDE MUZIRANENGE

6 months ago

443
Chatbox template

Author:
Lucas Martinez

2 years ago

12.4k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

8 months ago

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

Author:
ORGIN_DREAMS

6 months ago

620
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

20.7k
About Us Component

Author:
KULDEEP

4 months ago

920
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

422
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

7 months ago

498
3d element

Author:
Omer fils ELENGA

1 day ago

2
Apple Dock Navigation Bar

Author:
Cristian

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components