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

276

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

Apple Dock Navigation Bar

Author:
Cristian

5 months ago

851
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

1 month ago

157
Restaurant menu card

Author:
Anonymous

1 year ago

2.9k
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)

1 month ago

247
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

5 months ago

523
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

10.9k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

10 months ago

1.5k
background animation
background animation

Author:
Anonymous

1 year ago

45.4k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

176
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

2 months ago

269
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

1 month ago

73
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

15.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components