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.
HTML Code
<div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<div class="flex items-center">
<img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
<div class="text-white">
<h2 class="text-lg font-semibold">Product Name</h2>
<p class="text-gray-400">Product description goes here.</p>
<p class="text-xl font-bold mt-2">$29.99</p>
</div>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
Add to Cart
</button>
</div>
</div>Composants associés
Ajouter au panier Composant du bouton
Bouton conçu pour l’interface utilisateur du mode sombre avec une palette de couleurs de tons de terre et un niveau de complexité complexe, à des fins de portefeuille. Le composant est réactif et prend en charge le thème sombre à l’aide du préfixe dark : de Tailwind.
Brutalism Pastel Ajouter au panier Bouton
Bouton Ajouter au panier inspiré du brutalisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du mode sombre. Convient pour un blog ou un site Web de contenu.
Glassmorphism Ajouter au panier Bouton
Ajouter au panier Bouton avec le style Glassmorphism, la palette de couleurs monochromatique et la complexité modérée. Réactif avec prise en charge du mode sombre.