Componente de incrustación de medios
Un componente de incrustación de medios con un estilo de diseño 3D para profundidad y compromiso, efectos receptivos y compatibilidad con el modo oscuro.
Código HTML
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
<div class="ml-3">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<div class="mb-4">
<iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
</p>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con estética cyberpunk y azul corporativo, diseñado para interfaces de redes sociales con soporte para modo oscuro.
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 retro/vintage diseñado con nostalgia de los años 80 y 90. Cuenta con un estilo receptivo y compatibilidad con el modo oscuro con Tailwind CSS.