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.
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 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
<img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
<div class="flex items-center justify-between w-full mt-4">
<span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
Add to Cart
</button>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
<img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
</div>
</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.
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.
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.