Product Cards 组件

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
    Retro Product Dashboard
  </h1>
  <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-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>