Retro_E_commerce_Cards_Component

<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-12 px-4 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-stone-900 dark:text-stone-50 drop-shadow-md tracking-wider">
      Our Featured Retro Finds
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 left-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-br-lg shadow-md tracking-wider -rotate-3 transform origin-top-left group-hover:scale-110 transition-transform duration-200 z-10">
          SALE!
        </div>
        <img src="https://picsum.photos/400/300?random=1" alt="Vintage Record Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Vinyl Player '86</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Authentic analogue sound, built to last.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-lg font-extrabold text-amber-700 dark:text-amber-300 line-through mr-2">$299.99</p>
            <p class="text-2xl font-extrabold text-green-700 dark:text-green-400">$199.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=2" alt="Retro Game Console" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Pixel Console DX</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Relive 8-bit glory days, re-engineered.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$149.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=3" alt="Vintage Typewriter" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Classic Typewriter B4</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">For the writer who loves the tactile feel.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$249.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=4" alt="Old School Camera" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">SnapCam 1990</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Capture moments the classic way.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$119.50</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg shadow-md tracking-wider rotate-3 transform origin-top-right group-hover:scale-110 transition-transform duration-200 z-10">
          NEW!
        </div>
        <img src="https://picsum.photos/400/300?random=5" alt="Portable Cassette Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Walkman Classic</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Your favorite tunes on the go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$89.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=6" alt="Boombox" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Street Blaster '92</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Bring the party wherever you go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$175.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>