HTML 代码
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=1" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=2" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=3" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=4" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=5" />
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=6" />
</div>
</div>
</div>
</div>