Componente pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello in stile 3D con colori vivaci, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex justify-center items-center p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
<div class="flex justify-between items-center mb-4">
<img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
<p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
</div>
</div>
<button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
Add to Cart
</button>
</div>
</div>Componenti correlati
Organic_Nature_Add_To_Cart_Button
Un componente pulsante "Aggiungi al carrello" organico/ispirato alla natura con una combinazione di colori complementari, adatto per piattaforme educative. Presenta linee fluide, sottili elementi interattivi, piena reattività e supporto per la modalità oscura.
Pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente pulsante Aggiungi al carrello
Pulsante Aggiungi al carrello progettato per l'interfaccia utente in modalità oscura con combinazione di colori dei toni della terra e livello di complessità complesso, per scopi di portfolio. Il componente è reattivo e supporta il tema scuro utilizzando il prefisso dark: di Tailwind.