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 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
Un componente de incrustación de medios receptivo con soporte para temas oscuros, diseño complejo y combinación de colores complementaria, diseñado para paneles.
Componente de incrustación de medios de neumorfismo
Un componente neumórfico de incrustación de medios para sitios web comerciales, con diseño responsivo y soporte de temas oscuros con colores complementarios.