製品カード

                <div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
</div>
              

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 {
      background-color: #2d3748;
    }
    .text-gray-600 {
      color: #a0aec0;
    }
    .border-gray-300 {
      border-color: #4a5568;
    }
  }
</style>
              

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$49.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$59.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$39.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>