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
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.
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.
Pulsante Aggiungi al carrello
Un componente reattivo del pulsante Aggiungi al carrello progettato in uno stile scheumorfico, con colori vivaci e supporto per temi scuri, adatto per le interfacce dei social media.