Ajouter au panier Bouton
Un bouton d’ajout au panier réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, prenant en charge les thèmes en mode sombre.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold dark:text-white">$19.99</span>
<button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>
</div>Composants associés
Ajouter au panier Bouton
Ajouter au panier Composant de bouton avec design minimaliste / plat, palette de couleurs en niveaux de gris, niveau de complexité complexe, à des fins de tableau de bord, avec un design réactif 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.
Ajouter au panier Composant du bouton
Un composant de bouton Ajouter au panier de style 3D avec des couleurs vives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.