Composant d’intégration de média
Un composant d’intégration multimédia simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
<div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
<!-- Media Embed Area -->
<div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
<!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
<img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
Video Placeholder
</div>
</div>
<!-- Content Details -->
<div class="space-y-3">
<h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
Exploring the Serene Landscapes
</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
</p>
<div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
<span>By Jessica Lee</span>
<span class="text-gray-500 dark:text-gray-600">•</span>
<span>March 15, 2024</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’intégration du support Neumorphism
Un composant multimédia d’intégration multimédia neumorphe pour les sites Web d’entreprise, avec un design réactif et une prise en charge du thème sombre utilisant des couleurs complémentaires.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.