Componente de incrustación de medios
Un componente de incrustación de medios responsivo con un estilo retro/vintage, compatible con temas oscuros y con imágenes y avatares de marcadores de posición.
Código HTML
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
<div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
<h2 class="text-white text-xl font-bold">Retro Media Title</h2>
<p class="text-gray-300">This is a description of the retro media.</p>
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {background-color: #1a202c;}
.text-gray-800 {color: #e2e8f0;}
.text-gray-300 {color: #edf2f7;}
}
.bg-black { background-color: rgba(0, 0, 0, 0.8); }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
@media (max-width: 640px) {
.h-48 { height: 12rem; }
}
</style>
</div>Componentes relacionados
Componente de incrustación de medios retro
Un componente de incrustación de medios receptivo con un diseño "Retro / Vintage", inspirado en la estética de los años 80 / 90 como los viejos monitores CRT y reproductores de VCR. Utiliza un esquema de color complementario de verde azulado y naranja sobre una base gris pizarra, adecuado para sitios web de "Negocios / Corporaciones". El componente presenta una complejidad moderada con efectos de desplazamiento en el botón de reproducción y la miniatura de medios, una animación de luz REC falsa y elementos de control decorativos no funcionales. Incluye soporte para temas oscuros que utilizan el prefijo 'dark:' de Tailwind. El área de medios está diseñada para una relación de aspecto de 16:9 (requiere el complemento de relación de aspecto Tailwind o un truco de fondo de relleno similar al respaldo de CSS). Se utiliza la imagen de marcador de posición de picsum.photos.
Comercio Brutalist_Retro_Media_Embed_E
Un componente de incrustación de medios complejo, receptivo y de estilo brutalista para el comercio electrónico, con alto contraste, una paleta de colores retro, compatibilidad con el modo oscuro y múltiples elementos interactivos para exhibiciones de productos.
Componente de incrustación de medios
Un componente de incrustación de medios diseñado para el comercio electrónico con un estilo de diseño 3D, una combinación de colores complementaria y un diseño receptivo que admite el modo oscuro.