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.
Código HTML
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>Componentes relacionados
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.
Componente de incrustación de medios: tonos tierra minimalistas
Un componente minimalista de incrustación de medios para paneles, con diseño responsivo y soporte de temas oscuros, utilizando tonos tierra. Muestra un reproductor de vídeo, el título, la descripción y la información del canal.
Componente de incrustación de medios
Un componente de incrustación de medios receptivo con soporte de tema oscuro para sitios de blog/contenido, diseñado con principios de diseño de materiales, un esquema de color triádico y complejidad moderada. Incluye un marcador de posición de vídeo incrustado y enlaces a artículos relacionados.