Componente de incrustación de medios
Un componente de incrustación de medios receptivo diseñado con el estilo Glassmorphism, con elementos interactivos para el consumo de contenido.
Código HTML
<div class="flex flex-col items-center p-6 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 dark:bg-opacity-50 border border-white border-opacity-20 max-w-lg w-full">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white">
<div class="ml-4">
<h2 class="text-xl font-semibold text-white">John Doe</h2>
<p class="text-sm text-gray-200">Content Creator</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 rounded-lg p-4 shadow-md w-full">
<h3 class="text-lg font-bold text-white">Exciting New Developments in Technology</h3>
<iframe class="w-full h-60 mt-3 rounded-lg shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<p class="mt-2 text-white">Explore the latest trends and advancements in technology that are shaping the future. Join us as we dive deep into the innovations that are changing our world.</p>
<div class="mt-3 flex justify-between items-center">
<button class="py-2 px-4 bg-blue-500 text-white rounded-full hover:bg-blue-600">Read More</button>
<span class="text-xs text-gray-300">2 hours ago</span>
</div>
</div>
<img src="https://picsum.photos/400/200" alt="Media" class="mt-4 rounded-lg shadow-lg">
</div>Componentes relacionados
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.
Componente de incrustación de medios de viaje Art Deco
Un componente de incrustación de medios de estilo Art Deco complejo y de alto contraste para sitios web de viajes y turismo, con patrones geométricos, estilo lujoso y capacidad de respuesta total con soporte para modo oscuro. Diseñado para mostrar destinos de viaje o actividades con un reproductor multimedia integrado, detalles y llamadas a la acción.
Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con un diseño de morfismo de vidrio, combinación de colores pastel y soporte de modo oscuro, adecuado para el consumo de contenido y blogs.