HTML 代码
<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
</div>
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
</div>
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
</div>
</div>