Industrial_Marketplace_Media_Component

<div class="p-4 sm:p-6 bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md border border-amber-300 dark:border-zinc-700 font-sans">
  <div class="relative overflow-hidden mb-4 rounded-md border-2 border-amber-500 dark:border-zinc-600">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-40 sm:h-48 object-cover transition-transform duration-300 hover:scale-105">
    <span class="absolute top-2 left-2 px-3 py-1 bg-amber-700 dark:bg-amber-600 text-white text-xs font-semibold uppercase rounded-full shadow-sm">New</span>
  </div>
  <h3 class="text-lg sm:text-xl font-bold text-amber-900 dark:text-amber-100 mb-1 leading-tight">
    Industrial Gear Crate
  </h3>
  <p class="text-sm text-amber-800 dark:text-amber-300 mb-3 line-clamp-2">
    A durable and versatile gear crate, perfect for workshop storage. Crafted from reclaimed metal. Made for heavy duty use.
  </p>
  <div class="flex items-center justify-between">
    <span class="text-xl sm:text-2xl font-extrabold text-amber-700 dark:text-amber-400">
      $49.99
    </span>
    <button class="px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white text-sm font-semibold rounded-md shadow-lg hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      Add to Cart
    </button>
  </div>
</div>