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 della galleria brutalista
Un componente galleria reattivo e di ispirazione brutalista per piattaforme di intrattenimento, con neutri freddi ad alto contrasto e supporto per la modalità scura.
3D_Muted_Gallery_Component
Un componente della galleria complesso e reattivo con un'estetica di progettazione 3D, una combinazione di colori tenui e il supporto della modalità scura, adatto per un blog o un consumo di contenuti.
Componente della galleria immobiliare
Un componente della galleria reattivo e professionale per gli annunci immobiliari, caratterizzato da un layout pulito, una combinazione di colori pastello e il supporto completo della modalità scura. Include schede delle proprietà con dettagli, una sezione di filtro/ordinamento e un chiaro invito all'azione.