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
Un composant de cartes produit réactif conçu dans un style brutaliste avec Tailwind CSS, avec prise en charge du thème sombre et utilisant des images de remplacement.
Composant Cartes Produits Skeuomorphic
Composant de cartes produit simple et réactif avec un design skeuomorphe en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
ArtDeco_ProductCards_Music
Composant simple de cartes produit réactives avec une esthétique Art déco, avec des motifs géométriques et une palette de couleurs coucher de soleil/chaud, adapté aux plateformes musicales et audio. Inclut la prise en charge du mode sombre.