Composant Avis sur les produits
Composant utilisant Tailwind CSS avec le style Neumorphism, les effets réactifs et la prise en charge du thème sombre. Aucun code JavaScript n’est inclus. Des images et des avatars de substitution sont utilisés.
HTML Code
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
background-color: #e0e0e0;
}
.neumorphism-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
border-radius: 12px;
}
.neumorphism-card-dark {
background: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
}
.neumorphism-card {
background: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
}
</style>
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card 1 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
</div>
<!-- Review Card 2 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
</div>
<!-- Review Card 3 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
</div>
</div>
</div>Composants associés
Composant Avis sur les produits
Un composant minimaliste d’avis sur les produits conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.
Composant Avis sur les produits
Style rétro/vintage, palette de couleurs des tons de terre, complexité modérée Composant d’avis sur les produits avec un design réactif et prise en charge du thème sombre. Utilise Tailwind CSS pour le stylisme, picsum.photos pour les images de produits et randomuser.me pour les avatars. Pas de JavaScript.
Composant Avis sur les produits
Un composant réactif d’avis sur les produits conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise. Il présente des avatars d’utilisateurs, des évaluations d’avis et des commentaires d’utilisateurs dans une mise en page interactive.