Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con design Skeuomorphism, combinazione di colori pastello e complessità moderata per scopi di social media. Include il supporto per la modalità oscura e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Codice HTML
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Galleria 3D
Un complesso componente reattivo della galleria 3D progettato per l'e-commerce, caratterizzato da un tema scuro e una combinazione di colori complementari.
Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con lo stile Material Design, adatto per una dashboard con supporto per temi scuri.
Componente Galleria
Un componente della galleria reattivo con design Glassmorphism, combinazione di colori analoga, layout complesso e supporto per temi scuri per l'e-commerce.