Composant Cartes de produit
Un composant de carte produit réactif avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs adaptés aux interfaces de médias sociaux, tels que l’image du produit, le titre, la description, le prix et le bouton d’ajout au panier. La conception utilise des éléments translucides semblables à du verre givré avec des effets de flou. Aucun Javascript n’est utilisé, seulement du HTML avec des classes CSS Tailwind.
HTML Code
<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
<!-- Product Card 1 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=1"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$120.00
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=2"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$99.50
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=3"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$249.99
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
</div>
</div>
</div>
</div>
Composants associés
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.
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 Neumorphic - Palette Rétro
Il s’agit d’un composant complexe et réactif conçu avec un style d’interface utilisateur Neumorphic doux, utilisant une palette de couleurs rétro/vintage discrète. Les fonctionnalités incluent la prise en charge du mode sombre, des ombres subtiles pour l’effet d’extrusion et du HTML sémantique pour l’accessibilité. Convient pour la lecture et la consommation de contenu, comme un blog ou l’affichage de contenu.