Componente Schede prodotto
Un componente complesso della scheda prodotto caratterizzato da microinterazioni coinvolgenti e una combinazione di colori monocromatica. Progettato per i siti Web aziendali, è reattivo e supporta la modalità oscura.
Codice HTML
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto
Un componente della scheda prodotto reattivo con microinterazioni, design monocromatico e supporto per temi scuri.
Scheda Prodotto Skeuomorphic
Un componente della scheda prodotto scheumorfico per un dashboard, con stile in scala di grigi, complessità media, reattivo con modalità scura.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con microinterazioni nei toni della Terra, che fornisce supporto a tema scuro per la presentazione del portfolio.