Composant d’intégration de média
Glassmorphism Media Embed Component avec Earth Tones pour les sites Web d’entreprise/d’entreprise. Mise en page simple, réactif et prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu dans le style Glassmorphism, avec des éléments interactifs pour la consommation de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec Skeuomorphism, à l’aide d’un schéma de couleurs monochromatique. Il comprend un lecteur vidéo, une section de transcription et des boutons de partage social. La conception prend en charge le mode sombre et est construite avec Tailwind CSS.