Card

New type Card and premium card.

This tailwind example is contributed by Arjun Kumar, on 04-May-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Arjun Kumar

Tailwind v3.4 425

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 Flip Card | Premium Blur Effect</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @keyframes floatParticle {
            0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
            100% { transform: translateY(-150px) translateX(60px) scale(0); opacity: 0; }
        }
        .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #ff6b6b, #4ecdc4, #45b7d1);
            border-radius: 50%;
            pointer-events: none;
            animation: floatParticle 3.5s infinite ease-out;
        }
        .flip-card {
            perspective: 2000px;
            transform-style: preserve-3d;
        }
        .flip-card-inner {
            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        .flip-front, .flip-back {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .flip-back {
            transform: rotateY(180deg);
        }
        .glow-rare {
            transition: all 0.4s;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
        }
        .glow-rare:hover {
            background: rgba(255,255,255,0.35);
            box-shadow: 0 0 30px rgba(78,205,196,0.8);
            transform: scale(1.05);
        }
        .blur-overlay {
            backdrop-filter: blur(8px);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center min-h-screen overflow-hidden relative">

<div class="relative flip-card w-96 h-[32rem]">
        <div class="flip-card-inner relative w-full h-full">
            <div class="flip-front absolute w-full h-full rounded-2xl shadow-2xl overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 opacity-90"></div>
                <img src="https://picsum.photos/id/104/500/500" class="absolute inset-0 w-full h-full object-cover opacity-40">
                <div class="relative z-10 flex flex-col items-center justify-center h-full text-white">
                    <i class="fa-solid fa-gem text-6xl mb-4" style="color: #ffd700;"></i>
                    <h2 class="text-3xl font-black tracking-wider mb-2">PREMIUM CARD</h2>
                    <div class="w-20 h-1 bg-white/50 rounded-full my-4"></div>
                    <p class="text-lg opacity-90 flex items-center gap-2">
                        <i class="fa-solid fa-hand-pointer text-sm"></i> Hover to Flip
                    </p>
                </div>
            </div>
            <div class="flip-back absolute w-full h-full rounded-2xl shadow-2xl overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600"></div>
                <img src="https://picsum.photos/id/106/500/500" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
                <div class="relative z-10 flex flex-col items-center justify-center h-full text-white p-6 text-center blur-overlay bg-black/20">
                    <div class="relative">
                        <img src="https://picsum.photos/id/100/100/100" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-2xl mb-4">
                        <i class="fa-solid fa-circle-check absolute -bottom-1 -right-1 text-2xl bg-white rounded-full text-green-500 p-1"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">Amazing Creation</h3>
                    <p class="text-sm opacity-90 mb-4">This is my unique card with blur effect</p>
                    <button class="mt-2 px-6 py-2 rounded-full backdrop-blur-md glow-rare transition font-semibold flex items-center gap-2 mx-auto">
                        <i class="fa-regular fa-hand-peace"></i> Interact Now
                    </button>
                </div>
            </div>
        </div>
    </div>

Related Examples

Waitlist signup form

Anonymous

2 years ago

5.5k
Call to Action (CTA) Section

ariaw

1 year ago

1.2k
Call to action banner

isolde

2 years ago

6.1k
Component-[callToAction]

Matti

1 year ago

1.4k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

1.9k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

2 years ago

8.4k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Banshee

1 year ago

1.4k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Homayoun

10 months ago

745
Simple call to action

Laurits

3 years ago

10.6k
Call to action block

Sienna

3 years ago

12.4k
CTA section with floating icos as background

EliteAI Tools

1 year ago

1.7k