Skeuomorphic E-commerce 컴포넌트

<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-blue-500 text-white dark:bg-blue-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">New</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Gadget Pro</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Experience the future with this innovative gadget featuring realistic textures and interactions.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$249.99</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">15</span></p>
                    <p>Shipping: <span class="font-semibold">Free</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-green-500 text-white dark:bg-green-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">-20%</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Classic Audio Interface</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the nostalgia with this classic audio interface, meticulously crafted with skeuomorphic elements.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.00</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">8</span></p>
                    <p>Shipping: <span class="font-semibold">$9.99</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-yellow-500 text-gray-800 dark:bg-yellow-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">Limited</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Camera Lens</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Capture moments with this vintage-inspired lens, designed with a focus on realistic visual depth.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$349.50</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">3</span></p>
                    <p>Shipping: <span class="font-semibold">$4.99</span></p>
                </div>
            </div>
        </div>

    </div>

</div>