Componenti Galleria Componente Galleria retrò

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.

Anteprima

Codice HTML

<div class="bg-gray-200 dark:bg-gray-800 p-6">  <div class="container mx-auto">    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2>    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>      <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">        <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover">        <div class="p-4">          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3>          <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>        </div>      </div>    </div>  </div></div>

Componenti correlati

Componente Galleria

Un componente galleria reattivo con un design piatto minimalista, con immagini e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Galleria

Un componente della galleria reattivo progettato in Material Design con una combinazione di colori analoga per uno scopo di dashboard.

Aperto

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.

Aperto