Componente pulsante Aggiungi al carrello
Un pulsante reattivo "Aggiungi al carrello" progettato in modalità scura utilizzando Tailwind CSS, con effetti al passaggio del mouse e supporto per il tema scuro.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
<h2 class="text-lg font-semibold mb-2">Product Name</h2>
<p class="text-gray-400 mb-4">Short description of the product goes here.</p>
<div class="flex items-center justify-between w-full">
<span class="text-xl font-bold">$19.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
</div>
</div>Componenti correlati
Pulsante Aggiungi al carrello
Un componente reattivo del pulsante Aggiungi al carrello progettato in uno stile scheumorfico, con colori vivaci e supporto per temi scuri, adatto per le interfacce dei social media.
Pulsante Aggiungi al carrello
Componente pulsante Aggiungi al carrello con design minimalista/piatto, combinazione di colori in scala di grigi, livello di complessità complesso, per scopi di dashboard, con design reattivo e supporto per temi scuri.
Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" in stile retrò/vintage per applicazioni di e-commerce. Questo pulsante ha un design nostalgico ispirato agli anni '80 e '90, utilizzando una combinazione di colori analoga e con effetti per l'interattività. È reattivo e supporta temi scuri.