Pulsante Aggiungi al carrello
Un pulsante Aggiungi al carrello reattivo con i principi del Material Design utilizzando Tailwind CSS, che supporta i temi della modalità oscura.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold dark:text-white">$19.99</span>
<button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>
</div>Componenti correlati
Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" in stile 3D progettato per le interfacce dei social media. Presenta un'interfaccia ricca con profondità, elementi di design accattivanti ed è reattivo con il supporto del tema scuro.
Componente pulsante Aggiungi al carrello
Un complesso pulsante Aggiungi al carrello progettato con un'estetica retrò/vintage e una combinazione di colori complementari, adatto per un sito web aziendale professionale. Questo componente supporta la modalità oscura ed è reattivo, utilizzando Tailwind CSS per lo stile.
Pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.