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 de contenedor
Componente de contenedor responsivo con soporte de modo oscuro para comercio electrónico
Contenedor de diseño de materiales
Un componente contenedor de estilo Material Design que utiliza Tailwind CSS, con diseño responsivo y compatibilidad con temas oscuros.
Componente de contenedor
Un componente contenedor receptivo con microinteracciones que presenta animaciones atractivas que reaccionan a las acciones del usuario, admite el modo oscuro y usa Tailwind CSS.