ラグジュアリーモノクロ製品ギャラリー

<div class="bg-gray-100 py-12 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl text-center mb-12 font-serif">
      Our Exquisite Collection
    </h2>
    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
      <!-- Product Card 1 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1047/500/500" alt="Luxury Headphones" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Elegance Pro Headphones</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Immersive sound, unparalleled comfort.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$499.00</p>
        </div>
      </a>

      <!-- Product Card 2 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/160/500/500" alt="Studio Microphone" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Vocalist Studio Mic</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Capture clarity with precision.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$349.00</p>
        </div>
      </a>

      <!-- Product Card 3 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/161/500/500" alt="Portable Speaker" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">AuraFlow Portable Speaker</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Sound that moves with you.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$189.00</p>
        </div>
      </a>

      <!-- Product Card 4 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1054/500/500" alt="Vinyl Turntable" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Harmonix Vinyl Player</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Rediscover the warmth of sound.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$799.00</p>
        </div>
      </a>
    </div>
  </div>
</div>