Componente Pulsanti
Un componente di pulsanti reattivi con supporto alla modalità scura, adatto per l'e-commerce, caratterizzato da una semplice combinazione di colori triadici.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<!-- Product Card Example with Buttons -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
</div>
<div class="flex space-x-4">
<button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
<button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Buy Now
</button>
</div>
</div>
<!-- Standalone Buttons Section -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
View Details
</button>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Add to Wishlist
</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Contact Seller
</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Report Issue
</button>
</div>
</div>
</div>Componenti correlati
Componente Pulsanti
Un componente di pulsanti in stile 3D adatto a un portfolio con una combinazione di colori analoga e supporto per la modalità scura.
Componente Pulsanti
Un componente di pulsanti minimalista progettato per un portfolio che mostra lavori o prodotti, caratterizzato da colori vivaci e design reattivo con supporto per temi scuri utilizzando Tailwind CSS.
Componente Pulsanti
Un componente Buttons progettato con elementi 3D e colori vivaci per le interfacce dei social media, che supporta il tema scuro e il design reattivo.