Componente Schede prodotto
Un componente di schede prodotto reattivo progettato utilizzando i principi di Material Design con Tailwind CSS. Supporta la modalità oscura e presenta ombre e layout basati su griglia.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
</div>
</div>Componenti correlati
Schede prodotto Componente 52
Un componente della scheda prodotto reattivo che utilizza lo stile di progettazione Glassmorphism con supporto per il tema scuro e Tailwind CSS.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato con lo stile scheumorfismo, la combinazione di colori dei toni della terra e il supporto del tema scuro. Ideale per cruscotti.
Componente Schede prodotto
Componente della scheda prodotto con stile Brutalismo, combinazione di colori monocromatica, livello di complessità complesso per scopi di e-commerce.