Composant multimédia Glassmorphic
Un composant de carte multimédia réactif avec un design glassmorphism (effet verre givré) construit avec Tailwind CSS. Comprend un espace réservé à l’image (de picsum.photos) avec une icône de lecture de survol, du contenu textuel, une section d’auteur avec un avatar (à partir de randomuser.me) et des boutons d’action. Le composant prend en charge le mode sombre à l’aide des variantes CSS 'dark :' de Tailwind et est réactif sur différentes tailles d’écran. Aucun JavaScript n’est requis. Pour un effet visuel optimal, placez ce composant sur un fond contrasté. La fonctionnalité du mode sombre suppose une configuration CSS Tailwind appropriée (par exemple, 'darkMode : « class"' dans votre tailwind.config.js).
HTML Code
<div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
<!-- Image -->
<div class="relative">
<img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Content Area -->
<div class="p-5 sm:p-6">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
Glassmorphic Media Showcase
</h2>
<p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
</p>
<!-- Author/Meta Info -->
<div class="flex items-center space-x-3 mt-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
<div>
<p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
<p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-indigo-600 hover:bg-indigo-700 text-white
dark:bg-indigo-500 dark:hover:bg-indigo-600
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
View Details
</button>
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-white/50 hover:bg-white/70 text-slate-700
dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200
border border-white/60 dark:border-slate-600/60
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
Bookmark
</button>
</div>
</div>
</div>Composants associés
Skeuomorphic_Grayscale_Media_Component
Un composant multimédia complexe et réactif conçu dans un style skeuomorphe en niveaux de gris pour les sites Web d’entreprise, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant multimédia Skeuomorphism
Composant multimédia inspiré du skeuomorphisme utilisant un schéma de couleurs monochromatiques et un niveau de complexité complexe, adapté à des fins de blog/contenu. Les fonctionnalités incluent la conception réactive et la prise en charge du thème sombre sans JavaScript.
Composant Composants multimédias
Un composant multimédia complexe et réactif conçu pour les interfaces finance/banque, avec une palette de couleurs Ocean/Blue et une prise en charge native du mode sombre.