Componente de incrustación de medios
Componente de incrustación de medios de Glassmorphism con tonos de tierra para sitios web comerciales/corporativos. Diseño simple, responsivo y soporte de temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
<div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
<div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
<div class="relative z-10 space-y-4">
<!-- Video/Media Placeholder -->
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
</div>
<!-- Title -->
<div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
Business Insights: Q3 Performance
</div>
<!-- Description -->
<p class="text-stone-600 dark:text-stone-300 text-sm">
A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
</p>
<!-- Action Button (Optional) -->
<button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
Learn More
</button>
<!-- Metadata/Source (Optional) -->
<div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span>Published: October 26, 2023</span>
</div>
</div>
</div>
</div>
Componentes relacionados
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.
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 minimalista diseñado para paneles con diseño receptivo y compatibilidad con temas oscuros mediante Tailwind CSS.