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

643

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

Chat Bot

Author:
Md. Tofayel islam

7 months ago

850
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

598
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

5 months ago

498
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

4 months ago

168
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

1 year ago

1k
Tailwind card

Author:
Conan Hilton

3 years ago

13.8k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.7k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

3 months ago

433
profile2

Author:
pablitodgb

8 months ago

820
Subcribe Card - Alert - Notification

Author:
ABDO-SY

1 year ago

982
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components