搜索组件

类别

组件网格布局

网格布局

基于网格系统的内容排列

网格布局组件

一个遵循材料设计原则的响应式网格布局组件，具有阴影效果和黑暗模式支持，使用Tailwind CSS。

                <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

玻璃态网格布局组件

支持响应式与黑暗主题的玻璃塑形网格布局组件

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Glassmorphism Grid Layout</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

             <!-- Card 4 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 4</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <!-- Card 5 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 5</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
                </div>
            </div>

            <!-- Card 6 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 6</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

拟物化网格布局组件

具响应效果和支持黑暗主题的拟物化网格布局组件

打开预览

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example of a card with a skeuomorphic design approach, featuring gradients and shadows to mimic real-world textures.</p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Learn More</button>
    </div>

    <!-- Card 2 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Interactive Element</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Elements are designed to feel tangible, with hover effects that provide visual feedback, simulating physical interaction.</p>
      <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Details</button>
    </div>

    <!-- Card 3 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Dark Mode Ready</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This component includes full support for dark mode, with colors and shadows adjusting seamlessly for a comfortable viewing experience.</p>
      <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Explore Options</button>
    </div>

        <!-- Card 4 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/picsum/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Image Integration</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Images are integrated with subtle borders and shadows to enhance the skeuomorphic feel, blending them naturally into the design.</p>
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Gallery</button>
    </div>

     <!-- Card 5 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Responsive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">The grid layout is fully responsive, adapting to different screen sizes while maintaining the skeuomorphic integrity of the design.</p>
      <button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Discover More</button>
    </div>

     <!-- Card 6 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/another/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customizable</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Built with Tailwind CSS, this component is easily customizable, allowing for adjustments to colors, spacing, and other design elements.</p>
      <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Customize Now</button>
    </div>
  </div>
</div>

材料设计网格布局

一个响应式网格布局组件，具有材料设计风格，包括阴影效果和深色模式支持。

打开预览

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
      </div>
    </div>
     <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
      </div>
    </div>
  </div>
</div>

网格布局组件

一个极简网格布局组件，具有简单干净的设计，支持响应式效果和深色主题。使用来自picsum.photos和randomuser.me的占位符图像和头像。

打开预览

                <div class="container mx-auto p-4">
    <h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 4</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 5</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 6</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
    </div>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-700 { color: #edf2f7; }
    }
</style>

粗野主义网格布局

一个响应式网格布局组件，采用粗野主义设计风格，具有高对比度、异常布局和深色主题支持。

打开预览

                <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 1</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the first block. It's intentionally raw and bold.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 2</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the second block. Explore the unusual layout!</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 3</h2>
                <p class="text-gray-700 dark:text-gray-300">A bold statement piece in the grid. Unconventional and striking.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 4</h2>
                <p class="text-gray-700 dark:text-gray-300">Another block to emphasize the raw beauty of brutalism.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 5</h2>
                <p class="text-gray-700 dark:text-gray-300">Each block tells a story through its design and layout.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 6</h2>
                <p class="text-gray-700 dark:text-gray-300">Exploring textures and contrasts in brutalist design.</p>
            </div>
        </div>
    </div>
</div>
<style>
    .dark .border-gray-300 { border-color: gray; }
    .dark .text-gray-700 { color: #e5e7eb; }
</style>

网格布局组件 29

一种响应式网格布局组件，以野兽派风格设计，具有高对比度和不寻常的布局，支持使用Tailwind CSS的黑暗模式。

打开预览

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
  <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
  </div>
</div>

网格布局组件 7

一个采用野兽派风格设计的响应式网格布局组件，使用 Tailwind CSS，具有深色主题支持和随机占位符图像。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-6">Brutalism Grid Layout</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 1</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 2</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 3</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 4</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 5</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 6</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 6.</p>
        </div>
    </div>
</div>