Home
CodewithFaraz
3D Interactive Premium Card

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 CSS v3. It is responsive.

Card

Author CodewithFaraz

290

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

Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

2.1k
cards
cards slices

Author:
Anonymous

2 years ago

6.9k
Pokemon!
Cool Pokemon card!

Author:
Crimson

1 year ago

1.6k
Product card

Author:
Anum Shahana

1 year ago

1.6k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

9 months ago

603
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

8 months ago

600
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.5k
IMDB score and votes box

Author:
Darius G

2 years ago

8.7k
Contact us Form with Responsive

Author:
KULDEEP

6 months ago

564
Profile card

Author:
ariaw

4 months ago

403
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

1 year ago

3.1k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components