Ajouter au panier Bouton
Un composant de bouton skeuomorphique 'Ajouter au panier' conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
Add to Cart
</button>
</div>
</div>Composants associés
Rétro Ajouter au panier Bouton
Bouton « Ajouter au panier » réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une complexité modérée pour un tableau de bord. Prend en charge le mode sombre.
Ajouter au panier Composant du bouton
Un bouton d’ajout au panier réactif conçu pour le mode sombre à l’aide de Tailwind CSS.
Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » de style 3D conçu pour les interfaces de médias sociaux. Il dispose d’une interface riche avec de la profondeur, des éléments de conception attrayants et est réactif avec la prise en charge des thèmes sombres.