Componente multimediale Glassmorphic
Un componente della scheda multimediale reattivo con un design glassmorphism (effetto vetro smerigliato) costruito con Tailwind CSS. Presenta un segnaposto per immagini (da picsum.photos) con un'icona di riproduzione al passaggio del mouse, contenuti testuali, una sezione autore con un avatar (da randomuser.me) e pulsanti di azione. Il componente supporta la modalità oscura utilizzando le varianti "dark:" di Tailwind CSS ed è reattivo su varie dimensioni dello schermo. Non è richiesto alcun JavaScript. Per un effetto visivo ottimale, posizionare questo componente su uno sfondo a contrasto. La funzionalità della modalità oscura presuppone una configurazione CSS Tailwind appropriata (ad esempio, 'darkMode: "class"' nel tuo tailwind.config.js).
Codice HTML
<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>Componenti correlati
Componenti multimediali Componente 2
Un componente multimediale in stile retrò/vintage caratterizzato da un design nostalgico ispirato all'estetica degli anni '80/'90, con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Brutalismo Pastello Media Componente
Un componente multimediale semplice e brutalista con una combinazione di colori pastello, progettato per un blog. Reattivo con supporto per la modalità oscura.
Componente Componenti multimediali
Un componente multimediale complesso e reattivo per il consumo di contenuti di blog, in modalità scura con una combinazione di colori monocromatica. Include un'immagine, un titolo, una descrizione e un avatar dell'autore.