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 di schede prodotto reattivo progettato con elementi 3D e una combinazione di colori vivaci, che incorpora un tema scuro per il consumo di blog e contenuti. È caratterizzato da una complessità media con elementi interattivi per il coinvolgimento dell'utente.
Componente Schede prodotto
Un componente della scheda prodotto in stile Brutalismo con contrasto elevato, effetti reattivi e supporto per la modalità scura.
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.