Componente de contenedor brutalista
Un componente contenedor simple pero audaz diseñado con un estilo brutalista y una combinación de colores vibrantes, adecuado para sitios web comerciales o corporativos, que admite el modo oscuro con Tailwind CSS.
Código 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>Componentes relacionados
Componente contenedor neumórfico
Un componente contenedor neumórfico con capacidad de respuesta para mostrar trabajos o productos, diseñado con un esquema de color triádico y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Contenedor de comercio electrónico de diseño de materiales
Un componente contenedor de comercio electrónico receptivo con una cuadrícula de productos, un resumen del carrito de compras y compatibilidad con temas oscuros, diseñado utilizando los principios de Material Design y una combinación de colores en tonos tierra. Cuenta con múltiples elementos interactivos, que incluyen tarjetas de productos con imágenes, títulos, precios y botones "Agregar al carrito", así como un resumen del carrito de compras adhesivo que se actualiza con los artículos agregados. El diseño se ajusta a diferentes tamaños de pantalla y todos los elementos tienen estilos de modo oscuro definidos con los prefijos dark: de Tailwind CSS.
Componente de contenedor (panel de control, 'Panel')
Componente de contenedor responsivo con soporte de tema oscuro, diseñado para paneles con microinteracciones y un esquema de color análogo.