Pulsante Aggiungi al carrello
Un componente pulsante Skeuomorphic "Aggiungi al carrello" progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
Add to Cart
</button>
</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.
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.
Brutalism Pastel Pulsante Aggiungi al carrello
Pulsante Aggiungi al carrello ispirato al brutalismo con una combinazione di colori pastello, complessità moderata e design reattivo con supporto per la modalità oscura. Adatto per un blog o un sito Web di contenuti.