3D Interactive Premium Card

This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

This tailwind example is contributed by CodewithFaraz, on 11-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Card

Author CodewithFaraz

Tailwind v3.4 1.2k 3

Fork Fullscreen

<div class="card-perspective-container max-w-md w-full p-6 sm:p-8">

<div id="premiumCard" class="interactive-card rounded-2xl relative overflow-hidden bg-white">

<div class="shine-effect absolute inset-0 z-10"></div>

<div class="content-block p-6 sm:p-8">

<div class="flex items-center justify-between mb-4 translate-z-10">
          <span class="text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300">
                        DESIGN SYSTEM V3
                    </span>
          <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M5 3v4M3 5h4M6 17v4M17 19h4M16 3h4M18 5h-4M5 13v4M12 11h.01M17 13h.01M12 17h.01M17 17h.01"></path>
          </svg>
        </div>

<h1
          class="text-4xl sm:text-5xl font-extrabold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-indigo-800 leading-tight translate-z-20">
          Velocity Core
        </h1>

<p class="text-lg text-gray-600 mb-6 translate-z-10">
          Experience unparalleled interaction with our high-fidelity, responsive data visualization framework.
        </p>

<div class="grid grid-cols-2 gap-4 text-center border-t border-b border-gray-200 py-4 mb-8">
          <div class="border-r border-gray-200 pr-4">
            <p class="text-3xl font-bold text-indigo-600">99.9<span class="text-lg text-gray-500">%</span></p>
            <p class="text-sm text-gray-500 mt-1">Uptime SLA</p>
          </div>
          <div class="pl-4">
            <p class="text-3xl font-bold text-pink-600">45<span class="text-lg text-gray-500">ms</span></p>
            <p class="text-sm text-gray-500 mt-1">Avg. Latency</p>
          </div>
        </div>

<button class="glow-button w-full px-6 py-3 rounded-xl font-bold text-lg text-white uppercase tracking-wider
                               bg-gradient-to-r from-purple-700 to-pink-600
                               hover:from-purple-600 hover:to-pink-500 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50">
                    Deploy Solution
                </button>

</div>
    </div>
  </div>

function handleMouseMove(e) {
            // Get center coordinates of the card
            const rect = card.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;

// Calculate mouse position relative to the center (-1 to 1)
            const x = (e.clientX - centerX) / (rect.width / 2); // -1 when on the left, 1 on the right
            const y = (e.clientY - centerY) / (rect.height / 2); // -1 when on the top, 1 on the bottom

// Calculate rotation amount (invert Y for natural tilt)
            const rotateX = -y * maxRotation; // Tilt up/down
            const rotateY = x * maxRotation;  // Tilt left/right

// Apply the 3D transform
            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

// Subtle background effect adjustment on hover
            container.style.background = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, rgba(139, 92, 246, 0.05) 0%, transparent 40%)`;
        }

function handleMouseLeave() {
            // Reset transform smoothly
            card.style.transform = 'rotateX(0deg) rotateY(0deg)';
            container.style.background = 'none'; // Clear subtle background
        }

// Attach event listeners
        card.addEventListener('mousemove', handleMouseMove);
        card.addEventListener('mouseleave', handleMouseLeave);
        card.addEventListener('mouseenter', handleMouseMove);
  </script>

Related Examples

3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Nicole Shalom

1 year ago

1.9k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

UI-Templates

1 year ago

1.5k
Card
Simple Card

Anonymous

1 year ago

1.4k
Creative Bento Grid – Modern Services Section
A bold and responsive Bento Grid for presenting services, performance metrics and calls to action. Built entirely with Tailwind CSS and featuring vibrant colors, rounded cards and smooth hover effects.

Blanaru Casian

3 months ago

351
Portfolio form
Portfolio form

Joseph Melvin Kanu

2 years ago

3.5k
Card
card

5upreme505

2 years ago

2.7k
section card

Raul antonio de la cruz hernandez

10 months ago

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

MD Mostafa Niloy

11 months ago

793
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.5k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

3 months ago

283
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

1 year ago

1.3k