Componente de incrustación de medios
Componente de incrustación de medios interactivo con estilo Glassmorphism, combinación de colores análoga y compatibilidad con el modo oscuro para el consumo de contenido.
Código HTML
<div class="dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Media Title</h3>
<p class="text-sm">Date Published</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-300 text-base">
This is a description of the media content. It can be a short summary or excerpt.
</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Author Title</p>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios diseñado con efectos de morfismo de vidrio, con un diseño responsivo adecuado para sitios web comerciales con soporte de temas oscuros.
Componente de incrustación de medios 14
Un componente de incrustación de medios diseñado en un estilo skeuomórfico, con efectos responsivos y compatibilidad con temas oscuros. Incluye una imagen, una descripción y un avatar de usuario.
Componente de incrustación de medios
Un componente de incrustación de medios brutalista, vibrante y complejo para blogs, construido con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.