Componente della galleria dei prodotti
Un semplice componente reattivo della galleria di prodotti progettato con i principi del Material Design, con colori vivaci e supporto per la modalità scura, adatto per un cruscotto. Questo componente utilizza Tailwind CSS per lo stile.
Codice HTML
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Una galleria di prodotti reattiva con uno stile retrò/vintage, caratterizzata da una combinazione di colori complementari e progettata per siti Web aziendali/aziendali con supporto per la modalità scura.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per piattaforme musicali e audio, caratterizzato da un'interfaccia utente scura con una tavolozza di colori foresta/verde e supporto completo della modalità scura.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti che utilizza Tailwind CSS con uno stile di design neumorfico, una combinazione di colori complementari e un layout complesso adatto per i siti Web aziendali. Include il supporto per la modalità oscura e utilizza immagini da picsum.photos.