Componente de tarjeta brutalista
Un componente de tarjeta brutalista con diseño responsivo y soporte para modo oscuro.
Código HTML
<div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
<img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
<h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
<p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<span class="text-black dark:text-white">John Doe</span>
</div>
<button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>Componentes relacionados
Componente de tarjeta de esqueuomorfismo
Un componente de tarjeta de estilo Skeuomorphism con capacidad de respuesta para el modo oscuro mediante Tailwind CSS. Incluye imágenes de marcador de posición y avatares.
Cartas sociales del modo oscuro
Un componente de tarjeta receptivo diseñado para el modo oscuro con tonos tierra, diseñado para interfaces de redes sociales.
Neon_Glow_Farming_Cards
Un conjunto complejo de tarjetas responsivas para sitios web de agricultura/ganadería, con efectos de neón/resplandor con una combinación de colores cálidos/atardeceres, incluida la compatibilidad con el modo oscuro.