3D Gallery Component

<div class="max-w-7xl mx-auto p-6">
    <h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
                <button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
                <button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
                <button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
                <button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
                <button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
            </div>
        </div>
        <!-- Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
            <div class="relative h-48 mb-4 overflow-hidden rounded-lg">
                <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
                <div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
            </div>
        </div>
    </div>
</div>