HTML 代码
<section class="py-8 px-4 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-orange-600 dark:text-orange-400 text-center mb-6 sm:mb-8 md:mb-10">
Our Featured Designs
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-8 sm:mb-10 lg:mb-12 max-w-2xl mx-auto leading-relaxed">
Explore our collection of sophisticated and user-friendly interfaces, crafted with precision and passion.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Gallery Item 1 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Gallery Image 1">
<div class="absolute inset-0 bg-yellow-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Intuitive Dashboard</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">A clean and powerful analytics dashboard designed for clarity.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1043/600/400" alt="Gallery Image 2">
<div class="absolute inset-0 bg-red-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Seamless Onboarding</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Guiding users through their first experience with ease.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Gallery Image 3">
<div class="absolute inset-0 bg-orange-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Responsive Reporting</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Reports that look great on any device, any time.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1057/600/400" alt="Gallery Image 4">
<div class="absolute inset-0 bg-yellow-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">API Integration UI</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Simplified user interfaces for complex integrations.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1074/600/400" alt="Gallery Image 5">
<div class="absolute inset-0 bg-red-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Mobile-First Design</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Experience the best on any mobile device.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<div class="relative pb-2/3 overflow-hidden group">
<img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1080/600/400" alt="Gallery Image 6">
<div class="absolute inset-0 bg-orange-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
</div>
<div class="p-5 flex-grow flex flex-col">
<h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Customization Options</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Giving users the power to personalize their experience.</p>
</div>
</div>
</div>
</div>
</section>