媒体嵌入组件 - Marketplace

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300">
    <div class="md:flex">
      <!-- Media Section -->
      <div class="md:flex-shrink-0 relative w-full md:w-2/3 lg:w-3/5 xl:w-2/3">
        <div class="aspect-w-16 aspect-h-9 relative overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/1200/675?random=1" alt="Product media">
          <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/70 to-transparent text-white flex justify-between items-end">
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
              <span class="text-sm font-medium">0:35 / 4:12</span>
            </div>
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18h2v-6h-2v6zm4 0h2v-6h-2v6zM12 4.4L2 9.4v12.2h20V9.4L12 4.4zM4 20v-8h16v8H4z"></path></svg>
              </button>
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6.6-.9c.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6zM9.4 14.9c-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6zm3.2-5.4c.4.7.1 1.6-.6 2-.7.4-1.6.1-2-.6-.4-.7-.1-1.6.6-2 .7-.4 1.6-.1 2 .6z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-2 p-2 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer border-2 border-yellow-500" src="https://picsum.photos/300/200?random=1" alt="Thumbnail 1">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=2" alt="Thumbnail 2">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=3" alt="Thumbnail 3">
          <div class="relative w-full h-20 bg-gray-300 dark:bg-gray-600 rounded flex items-center justify-center cursor-pointer group">
            <img class="w-full h-full object-cover rounded opacity-70 group-hover:opacity-100" src="https://picsum.photos/300/200?random=4" alt="Thumbnail 4">
            <div class="absolute inset-0 bg-black/50 text-white flex items-center justify-center rounded">
              <span class="text-lg font-bold">+5</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Details Section -->
      <div class="p-6 md:p-8 md:w-1/3 lg:w-2/5 xl:w-1/3 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-amber-600 dark:text-amber-400 font-semibold mb-2">Vintage Collectible</div>
          <h1 class="block mt-1 text-2xl leading-tight font-extrabold text-gray-900 dark:text-white break-words md:text-3xl lg:text-4xl">
            Mid-Century Modern Desk Lamp
          </h1>
          <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed">
            A rare and exquisite piece from the 1960s, a true testament to timeless design and craftsmanship, perfect for adding a touch of retro elegance to any space.
          </p>

          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-gray-900 dark:text-yellow-400 mr-2">$129.99</p>
            <p class="text-xl text-gray-500 dark:text-gray-400 line-through">$150.00</p>
            <span class="ml-2 text-green-600 dark:text-green-400 font-semibold text-sm">(13% off)</span>
          </div>

          <div class="mt-6">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Seller:</h3>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-400 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Seller Avatar">
              <div class="ml-4">
                <p class="text-lg font-medium text-gray-900 dark:text-white">RetroFinds Emporium</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">500+ sales <span class="text-amber-500">★ 4.9</span></p>
              </div>
            </div>
          </div>

          <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Features:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm space-y-1">
              <li>Solid Brass Construction</li>
              <li>Adjustable Articulating Arm</li>
              <li>Original Bakelite Switch</li>
              <li>Works with E27 LED bulbs</li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M17 18a2 2 0 01-2 2A2 2 0 0113 18A2 2 0 0115 16A2 2 0 0117 18zm-7 0a2 2 0 01-2 2A2 2 0 016 18A2 2 0 018 16A2 2 0 0110 18zm10.7-15.6l-1.6 1.8c-1.1.9-2.6 1.2-4 1.1h-4.3c-.6 0-1.1.2-1.4.6l-2-2.1c-.8-.9-2.2-.9-3 0-1.2 1.3-1.4 3-1.4 4.5l.5 6.3c.1.7.7 1.2 1.4 1.2h14c.7 0 1.3-.5 1.4-1.2l.5-6.3c.1-1.5-.1-3.2-1.4-4.5z"></path></svg>
            Add to Cart
          </button>
          <button class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300/50 dark:focus:ring-gray-600/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
            Wishlist
          </button>
        </div>
      </div>
    </div>
  </div>
</div>