Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato in uno stile minimalista con una combinazione di colori pastello, adatto per siti Web aziendali o aziendali e include il supporto per la modalità scura.
Codice HTML
<div class="container mx-auto p-6">
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto schedembe
Componente di schede prodotto semplice e reattivo con un design scheumorfico in scala di grigi, adatto per siti web aziendali/aziendali. Include il supporto per la modalità oscura.
Componente Schede prodotto
Un semplice componente reattivo della scheda prodotto con microinterazioni, progettato per le interfacce dei social media che utilizzano Tailwind CSS, che supporta il tema scuro e la combinazione di colori in scala di grigi.
Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato in stile Material Design, con una combinazione di colori in scala di grigi. Include un'immagine, un titolo, una descrizione e un pulsante con supporto per la modalità oscura utilizzando Tailwind CSS.