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.
Código HTML
<div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
<p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
</div>
</div>
<div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
<iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
<div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
</div>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
</div>
</div>Componentes relacionados
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.
Componente de incrustación de medios retro
Un componente de incrustación de medios receptivo con un diseño retro / vintage, colores vibrantes, complejidad moderada y soporte de modo oscuro, adecuado para plataformas de comercio electrónico.
Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con diseño 3D en escala de grises y soporte de modo oscuro, adecuado para sitios web comerciales. Utiliza Tailwind CSS para el estilo.