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

516

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

Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 months ago

627
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

7 months ago

1.5k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

7 months ago

1.7k
Sign up
sign up page

Author:
gidy

3 months ago

872
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

5 months ago

358
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.6k
responsive home page
the best home page

Author:
irahoza daniel

3 months ago

731
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

2 months ago

106
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

957
Half filled circle with tailwind

Author:
Alok

2 years ago

13.1k
Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

7 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components