Componente pulsante Aggiungi al carrello
Un componente reattivo del pulsante Aggiungi al carrello progettato in stile brutalista con colori vivaci, adatto per interfacce di social media con supporto per temi scuri.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
<p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
<div class="mt-5">
<button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400">
</div>
</div>
</div>
Componenti correlati
Pulsante Aggiungi al carrello
Pulsante Aggiungi al carrello ispirato al brutalismo con colori vivaci e supporto per la modalità scura.
Componente pulsante Aggiungi al carrello
Un pulsante reattivo "Aggiungi al carrello" con microinterazioni accattivanti, toni caldi / tramonto, adatto per siti Web di cibo / ristoranti, con una sottile animazione al passaggio del mouse / clic e supporto per la modalità oscura.
Componente pulsante Aggiungi al carrello
Un componente pulsante reattivo "Aggiungi al carrello" per siti Web di viaggi/turismo, ispirato al design della carta/stampa con toni caldi del tramonto. Include il supporto per la modalità oscura e un sottile effetto interattivo.