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 con glassmorphism
Componente con diseño Glassmorphism, responsivo y soporte de modo oscuro
Componente de componentes de medios
Un componente multimedia complejo y responsivo para el consumo de contenido de blog, diseñado en modo oscuro con un esquema de color monocromático. Incluye una imagen, título, descripción y avatar del autor.
Componente de componentes de medios
Un componente multimedia responsivo con microinteracciones con animaciones atractivas, diseñado con Tailwind CSS. Es compatible con el tema oscuro e incluye imágenes de marcador de posición y avatares.