Ajouter au panier Bouton
Un composant de bouton d’ajout au panier réactif conçu dans un style skeuomorphe, avec des couleurs vives et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux.
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 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
<img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
<div class="flex items-center justify-between w-full mt-4">
<span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
Add to Cart
</button>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
<img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
</div>
</div>
</div>Composants associés
Ajouter au panier Bouton Composant 46
Un composant de bouton rétro/vintage « Ajouter au panier » conçu avec Tailwind CSS, avec un design réactif et la prise en charge des thèmes sombres.
Ajouter au panier Bouton
Un composant de bouton d’ajout au panier réactif conçu avec des éléments skeuomorphes, des couleurs vives et la prise en charge du thème sombre, adapté à des fins de blog et de consommation de contenu.
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.