Componente Media Components con Glassmorphism
Componente con design Glassmorphism, supporto per la modalità reattiva e oscura
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400"> pêøvêl</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Componenti multimediali
Un componente multimediale reattivo per l'e-commerce con Material Design e combinazione di colori monocromatici.
Componenti multimediali Componente 39
Un componente multimediale progettato con l'interfaccia utente della modalità oscura, con effetti reattivi e supporto per il tema scuro utilizzando Tailwind CSS.
Componente Componenti multimediali
Un componente Media Components reattivo con un design brutalista, colori vivaci e layout complesso per una dashboard, con supporto per temi scuri e senza JavaScript. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.