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
Componente pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello ispirato al brutalismo con Tailwind CSS, caratterizzato da contrasto elevato, layout insoliti, effetti reattivi e supporto per temi scuri.
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 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.