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
Il s’agit d’un composant complexe et réactif de cartes de produits avec un design d’entreprise/professionnel utilisant une palette de couleurs violet/violet, adapté aux actualités ou aux listes de produits de services professionnels. Inclut la prise en charge du mode sombre.
Composant Cartes de produits
Un composant simple de carte produit e-commerce conçu dans le style Material Design à l’aide d’une palette de couleurs en niveaux de gris et d’un design réactif avec prise en charge du thème sombre.
Composant Fiches Produits - Agriculture/Agriculture
Un composant de fiche produit réactif conçu pour l’agriculture et les sites Web agricoles, avec une typographie épurée, des systèmes de grille et des couleurs d’automne. Inclut la prise en charge du mode sombre.