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

878

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

Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

7 months ago

1k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

4 months ago

469
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.6k
Image Gallery with Alpine.Js

Author:
Maxim

11 months ago

841
Share button

Author:
Maxim

11 months ago

1.3k
Stacked Checkboxes

Author:
kishan pc

1 year ago

3k
default template

Author:
Anonymous

6 months ago

439
Age verification 18+

Author:
Maxim

11 months ago

1k
templete
templete

Author:
Uwera Dorcas

6 months ago

530
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

5 months ago

365
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components