Skeuomorphic_E-commerce_Container

<div class="relative m-4 rounded-xl bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 p-8 shadow-2xl dark:from-purple-800 dark:via-pink-800 dark:to-red-800">
  <div class="absolute inset-0 rounded-xl border-4 border-white border-opacity-30 dark:border-gray-700"></div>

  <div class="relative z-10">
    <h2 class="mb-6 text-center font-serif text-4xl font-bold tracking-wide text-gray-800 drop-shadow-md dark:text-white">
      Skeuomorphic Product Showcase
    </h2>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Product Card 1 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product1/400/300"
          alt="Product Image 1"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Vintage Camera</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">A classic piece for photography enthusiasts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$299.99</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product2/400/300"
          alt="Product Image 2"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Leather Bound Journal</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Handcrafted for your deepest thoughts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$45.00</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product3/400/300"
          alt="Product Image 3"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Artisan Coffee Mug</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Enjoy your brew in style.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$22.50</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <div class="mt-10 flex justify-center">
      <button class="transform rounded-full bg-gradient-to-r from-green-400 to-blue-500 px-8 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:scale-105 hover:from-green-500 hover:to-blue-600 dark:from-green-700 dark:to-blue-800 dark:hover:from-green-800 dark:hover:to-blue-900">
        View All Products
      </button>
    </div>
  </div>
</div>