组件 画廊 画廊组件

画廊组件

一个采用极简平面设计的响应式画廊组件,具有图像和使用 Tailwind CSS 支持暗黑主题。

预览

HTML 代码

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
        </div>
    </div>
</div>

相关组件

电子商务产品画廊

一个复杂、响应式且与深色主题兼容的画廊组件,具有极简主义设计、互补配色方案和多个适用于电子商务的交互式元素。

打开

画廊组件

一个以神经形态风格设计的画廊组件,采用天然色调,适用于博客/内容目的。该组件具有丰富的界面,多个互动元素,响应式设计和深色主题支持。

打开

Event_Gallery_Component

适用于活动和会议网站的响应式图库组件,具有宝石色调、颜色渐变、平滑过渡和深色模式支持。它在视觉上吸引人的网格中展示活动亮点或演讲者图像。

打开