组件 容器 粗犷主义容器组件

粗犷主义容器组件

一个简单但大胆的容器组件,采用粗犷主义风格和鲜艳色彩方案,适合商业或企业网站,支持使用 Tailwind CSS 的黑暗模式。

预览

HTML 代码

<div class="container mx-auto p-4">
    <div class="bg-yellow-400 dark:bg-yellow-600 border-4 border-red-800 dark:border-red-500 rounded-lg shadow-xl p-6">
        <h1 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4">Business Title</h1>
        <p class="text-base text-gray-800 dark:text-gray-200 mb-6">This is a simple yet bold container designed for a business or corporate website. The design embraces a brutalist style with vibrant colors.</p>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="w-full h-auto rounded-lg mb-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-900 dark:border-blue-200 mr-2">
            <div class="text-sm">
                <p class="font-bold text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">CEO, Company Name</p>
            </div>
        </div>
    </div>
</div>

相关组件

社交媒体容器

一个响应式容器组件,具有鲜艳的色彩、引人入胜的微交互和暗黑主题支持,适合社交媒体界面。特点包括细腻的悬停效果和干净的布局。

打开

容器组件

用于电子商务的响应式 Material Design 容器,具有柔和的色彩、深色模式支持和使用 Tailwind CSS 的复杂交互式元素。

打开

容器组件

一个响应式容器组件,具有微交互功能,配备针对用户操作反应的引人入胜的动画,支持暗黑模式,并使用Tailwind CSS。

打开