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.
HTML Code
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
<p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produit
Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.
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.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec le style skeuomorphism, la palette de couleurs des tons de terre et la prise en charge du thème sombre. Idéal pour les tableaux de bord.