HTML 代码
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> </div></div>