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

card bento

Omer fils ELENGA

2 weeks ago

38
profile3

pablitodgb

1 year ago

1k
Card
Card Layout in Tailwind as React Compoment

Deepak Sharma

1 year ago

1.7k
Event notification card

Odessa Young

3 years ago

9.9k
Experince Section

ABDO-SY

1 year ago

1.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Anum Shahana

2 years ago

2.1k
Minimal Testimonial Card

Amit Pachange

3 years ago

9.5k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.4k
card
best responsive tailwind card

irahoza daniel

1 year ago

1.8k