Brutalismo Pastel Componente de Medios
Un componente mediático simple y brutalista con una combinación de colores pastel, diseñado para un blog. Responsivo con soporte para modo oscuro.
Código HTML
<div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
<div class="p-4">
<div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
<p class="text-gray-700 text-base dark:text-gray-300">
This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
</p>
<div class="mt-4 flex items-center">
<img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Date</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de medios Componente 2
Un componente multimedia de estilo retro/vintage con un diseño nostálgico inspirado en la estética de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Bauhaus_E-commerce_Media_Component
Un componente multimedia de comercio electrónico responsivo y funcional con un diseño monocromático inspirado en la Bauhaus, soporte de modo oscuro, formas geométricas que enfatizan y una jerarquía visual clara para la presentación del producto.
Neumorfismo simple Componente de medios de comercio electrónico
Componente de medios de estilo neumorfismo con tonos tierra, complejidad simple, para sitio de comercio electrónico, con diseño receptivo y soporte de tema oscuro. Utiliza picsum.photos para las imágenes.