Composant Cartes de produit
Un composant de carte produit réactif avec une conception 3D, une palette de couleurs analogues et une prise en charge du mode sombre, conçu pour les interfaces de médias sociaux.
HTML Code
<div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
<div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
<div class="relative h-48">
<img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
<div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
<div class="flex items-center mt-4">
<div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
<button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
</div>
</div>
</div>
</div>
<style>
/* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark\:shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
</style>Composants associés
Composant Cartes de produit
Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes de produit
Un composant de carte produit réactif avec des micro-interactions, un design monochromatique et une prise en charge du thème sombre.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.