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

169

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