Home
Quentin Rivers
Futuristic 3D Tilt Card

Futuristic 3D Tilt Card

Hover to see the 3D effect

This tailwind example is contributed by Quentin Rivers, on 03-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Quentin Rivers

2.6k

Fork Fullscreen

<div class="bg-gray-900 h-screen flex items-center justify-center overflow-hidden">
    <div
        class="tilt-card w-80 h-96 bg-gradient-to-br from-purple-700 to-pink-500 rounded-2xl shadow-2xl relative cursor-pointer transition-all duration-300 ease-out hover:scale-105">
        <div class="glow opacity-0 transition-opacity duration-300"></div>
        <div class="tilt-card-content p-6 flex flex-col h-full justify-between relative z-10">
            <div>
                <h2 class="text-3xl font-bold text-white mb-2">Quantum Leap</h2>
                <p class="text-gray-200">Experience the future of technology with our revolutionary quantum computing
                    solution.</p>
            </div>
            <div class="space-y-4">
                <div class="bg-white bg-opacity-20 rounded-lg p-3">
                    <div class="text-xs text-gray-300 uppercase">Processing Power</div>
                    <div class="text-2xl font-bold text-white">100 Qubits</div>
                </div>
                <button class="w-full py-2 bg-white text-purple-700 rounded-lg font-semibold transform transition hover:scale-105 active:scale-95">
                    Explore Now
                </button>
            </div>
        </div>
    </div>

card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

const centerX = rect.width / 2;
            const centerY = rect.height / 2;

const percentX = (x - centerX) / centerX;
            const percentY = -((y - centerY) / centerY);

card.style.transform = `perspective(1000px) rotateY(${percentX * 10}deg) rotateX(${percentY * 10}deg)`;
            content.style.transform = `translateZ(50px)`;
            glow.style.opacity = '1';
            glow.style.backgroundImage = `
                radial-gradient(
                    circle at 
                    ${x}px ${y}px, 
                    #ffffff44,
                    #0000000f
                )
            `;
        });

card.addEventListener('mouseleave', () => {
            card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
            content.style.transform = 'translateZ(0px)';
            glow.style.opacity = '0';
        });
    </script>
</div>

Related Examples

Card with full width image
centered content

Author:
Mr Robot

2 years ago

10.1k
Monkey card
First tailwind example

Author:
muhittin budak

6 months ago

628
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

5 months ago

743
home
html , css

Author:
Hacker Development

5 months ago

1.5k
Pricing Table

Author:
Akshay

3 years ago

10.8k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

5 months ago

658
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

8 months ago

812
sticky headings
sticky headings

Author:
Anonymous

1 year ago

6k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.1k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

5 months ago

574
Department Card

Author:
Ashok Kumar

1 year ago

1.6k
Card Slider

Author:
Maxim

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components