card

glowing, tilt card

This tailwind example is contributed by Akram Khan, on 03-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Akram Khan

429

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Glassmorphic Project Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

/* CSS Custom Property for conic-gradient angle animation */
        @property --angle {
          syntax: '<angle>';
          initial-value: 0deg;
          inherits: false;
        }

@keyframes spinAngle {
          to {
            --angle: 360deg;
          }
        }

.card-container {
            perspective: 1500px; /* Applied to the parent for 3D effect */
            display: flex; /* For centering */
            align-items: center; /* For centering */
            justify-content: center; /* For centering */
            min-height: 100vh; /* Full viewport height */
            padding: 1rem; /* Padding for smaller screens */
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%); /* Darker, more sophisticated gradient */
        }

.project-card {
            width: 100%;
            max-width: 380px; /* Slightly larger card */
            position: relative;
            border-radius: 20px; /* Slightly larger for the glow to wrap around */
            transition: transform 0.1s linear;
            transform-style: preserve-3d;
            z-index: 1;
        }

/* Rainbow glow pseudo-element */
        .project-card::before {
            content: "";
            position: absolute;
            top: -6px; /* Adjusted for new border-radius */
            left: -6px;
            right: -6px;
            bottom: -6px;
            background: conic-gradient(
                from var(--angle),
                #ff0072, #ff00c8, #ad00ff, #0088ff, #00e0ff,
                #00ff8c, #aeff00, #ffee00, #ff7f00, #ff0000, #ff0072
            );
            border-radius: 26px; /* Must be larger than card's content border-radius */
            filter: blur(18px); /* Slightly more blur for a softer glow */
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            animation: spinAngle 2.5s linear infinite paused; /* Faster spin */
        }

.project-card:hover::before {
            opacity: 0.85; /* Brighter glow */
            animation-play-state: running;
        }

/* Actual card content with glassmorphism */
        .card-content {
            background-color: rgba(30, 41, 59, 0.7); /* Slightly more opaque for readability */
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly more visible border */
            border-radius: 20px; /* Matches project-card */
            overflow: hidden;
            color: #e2e8f0;
            transform: translateZ(0);
            position: relative; /* For the glare pseudo-element */
        }

/* Glare effect on card content */
        .card-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%; /* Start off-screen */
            width: 60%; /* Width of the glare */
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.12) 50%, /* Subtle glare */
                rgba(255, 255, 255, 0) 100%
            );
            transform: skewX(-25deg); /* Angled glare */
            transition: left 0.85s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition */
            z-index: 1; /* Above image, below text content */
            pointer-events: none; /* Allow clicks through */
        }

.project-card:hover .card-content::after {
            left: 150%; /* Move across and off the card */
        }

.project-card img {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            width: 100%;
            height: 220px; /* Slightly taller image */
            object-fit: cover;
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition for scale/translate */
            position: relative; /* Needed for z-index stacking if issues arise, but usually fine */
            z-index: 0; /* Ensure it's below the glare */
        }

/* Tech Tag Styling */
        .tech-tag {
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
            background-color: rgba(255, 255, 255, 0.05); /* Subtle background for tags */
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.project-card:hover .tech-tag {
            transform: translateY(-3px) scale(1.05); /* Pop out more */
            box-shadow: 0 4px 8px rgba(0,0,0,0.25);
        }

/* Button Styling */
        .view-details-button {
           transition: all 0.25s ease-in-out, transform 0.15s ease-out;
        }

.view-details-button:hover {
            transform: translateY(-4px) scale(1.03); /* More lift */
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.35), 0 0 15px rgba(96, 165, 250, 0.3); /* Enhanced shadow */
        }
        .view-details-button:active {
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 5px 10px rgba(59, 130, 246, 0.25);
        }

</style>
</head>
<body class="bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 antialiased">

<div class="card-container">
        <div class="project-card">
            <div class="card-content">
                <img src="https://placehold.co/400x250/0f172a/a5b4fc?text=Enhanced+Project"
                     alt="Project Thumbnail"
                     onerror="this.onerror=null; this.src='https://placehold.co/400x250/0f172a/FFFFFF?text=Image+Error';">
                <div class="p-6"> 
                    <h3 class="text-2xl font-bold text-white mb-3">Advanced Interactive Card</h3>
                    <p class="text-sm text-slate-300 mb-5 leading-relaxed">
                        Featuring enhanced 3D tilt, image parallax, card glare, animated rainbow glow, and interactive UI elements.
                    </p>
                    <div class="flex flex-wrap gap-2.5 mb-6"> 
                        <span class="tech-tag bg-sky-700/50 text-sky-200 px-3 py-1.5 text-xs font-semibold rounded-full">HTML5</span>
                        <span class="tech-tag bg-pink-700/50 text-pink-200 px-3 py-1.5 text-xs font-semibold rounded-full">CSS3</span>
                        <span class="tech-tag bg-yellow-600/50 text-yellow-100 px-3 py-1.5 text-xs font-semibold rounded-full">JavaScript ES6</span>
                        <span class="tech-tag bg-indigo-700/50 text-indigo-200 px-3 py-1.5 text-xs font-semibold rounded-full">TailwindCSS</span>
                    </div>
                    <a href="#"
                       class="view-details-button inline-block w-full text-center bg-blue-600 hover:bg-blue-500 active:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-60">
                        Explore Project
                    </a>
                </div>
            </div>
        </div>
    </div>

const image = card.querySelector('img');
            const maxTilt = 10; // Max tilt in degrees (slightly increased)
            const imageMaxOffset = 12; // Max pixels the image will move for parallax

card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;

const rotateY = (x / (rect.width / 2)) * maxTilt;
                const rotateX = (y / (rect.height / 2)) * -maxTilt;

card.style.transition = 'transform 0.05s linear';
                card.style.transform = `perspective(1500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`; // Slightly more scale

if (image) {
                    const imageOffsetX = (x / (rect.width / 2)) * -imageMaxOffset * 0.4; // Parallax factor
                    const imageOffsetY = (y / (rect.height / 2)) * imageMaxOffset * 0.4; // Parallax factor (already inverted due to -maxTilt)
                    
                    image.style.transition = 'transform 0.05s linear'; // Quick follow for image
                    image.style.transform = `translateX(${imageOffsetX}px) translateY(${imageOffsetY}px) scale(1.1)`; // Image scales more
                }
            });

card.addEventListener('mouseenter', () => {
                card.style.transition = 'transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)';
                if (image) {
                    image.style.transition = 'transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)'; // Smooth scale in for image
                    image.style.transform = `scale(1.1)`; // Initial scale on card hover
                }
            });

card.addEventListener('mouseleave', () => {
                card.style.transition = 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)';
                card.style.transform = `perspective(1500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
                if (image) {
                    image.style.transition = 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)';
                    image.style.transform = 'translateX(0px) translateY(0px) scale(1)';
                }
            });
        });
    </script>

</body>
</html>

Related Examples

Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

4 months ago

216
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.7k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

4 months ago

330
User profile card with Cover Image

Author:
Noob

3 years ago

31k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

1 month ago

198
File Upload

Author:
Rajesh Maheshwari

8 months ago

932
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

6 months ago

889
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

5 months ago

586
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

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

11 months ago

1.5k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.5k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components