Brutalist Container Component
A simple but bold container component designed with a brutalist style and vibrant color scheme, suitable for business or corporate websites, supporting dark mode using Tailwind CSS.
HTML Code
<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>Related Components
Material Design Container
A Material Design-styled container component using Tailwind CSS, featuring responsive design and dark theme support.
Material Design E-commerce Container
A responsive e-commerce container component with a product grid, shopping cart summary, and dark theme support, designed using Material Design principles and an Earth tones color scheme. It features multiple interactive elements, including product cards with images, titles, prices, and "Add to Cart" buttons, as well as a sticky shopping cart summary that updates with added items. The layout adjusts for different screen sizes, and all elements have dark mode styles defined with Tailwind CSS dark: prefixes.
Container Component
A simple, responsive dashboard container with engaging microinteractions and a dark theme, focusing on analogous colors.