Componente Galleria
Un componente galleria reattivo con microinterazioni per i social media, progettato con un tema scuro e un layout semplice utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">John Doe</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Jane Smith</span>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-bold">Michael Johnson</span>
</div>
</div>
</div>
<!-- Repeat as necessary for more images -->
</div>
</div>
Componenti correlati
Galleria prodotti e-commerce
Un componente della galleria complesso, reattivo e compatibile con il tema scuro con un design minimalista, una combinazione di colori complementari e molteplici elementi interattivi adatti all'e-commerce.
Componente Galleria
Un semplice componente della galleria che utilizza Tailwind CSS, implementando uno stile di design Brutalism con una combinazione di colori triadica e il supporto del tema scuro per mostrare lavori o prodotti.
Componente Galleria retrò
Un componente galleria reattivo con stile retrò/vintage, combinazione di colori vivaci e layout semplice per il consumo di blog/contenuti, con supporto per la modalità oscura. Utilizza Tailwind CSS.