Ajouter au panier Composant du bouton
Un composant de bouton Ajouter au panier inspiré du brutalisme avec Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles, des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
<div class="flex flex-col items-center text-center">
<h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
<button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
Add to Cart
</button>
</div>
</div>Composants associés
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.
Ajouter au panier Bouton
Un bouton Skeuomorphic Ajouter au panier avec des effets réactifs et la prise en charge du thème sombre.
Ajouter au panier Bouton
Un composant de bouton Ajouter au panier de conception 3D avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.