Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" reattivo con i principi del Material Design, con una combinazione di colori triadica e il supporto della modalità scura. Progettato per l'uso in dashboard, include un selettore di quantità e integra effetti di profondità utilizzando Tailwind CSS per ombre e animazioni.
Codice HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
<div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
<img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow text-center md:text-left">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
<div class="flex items-center justify-center md:justify-start mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
<span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
</div>
<div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
<label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
</div>
<button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
Add to Cart
</button>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
<p>In stock: <span class="font-bold text-green-500">Yes</span></p>
</div>
</div>
</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 retrò
Pulsante reattivo "Aggiungi al carrello" con design retrò / vintage, combinazione di colori complementari e complessità moderata per uno scopo di dashboard. Supporta la modalità oscura.
Brutalismo Aggiungi al carrello Pulsante
Un semplice componente pulsante "Aggiungi al carrello" in stile brutalista con contrasto elevato, colori complementari e scopo per i social media. Completamente reattivo con supporto per la modalità oscura.