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.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="px-6 py-4">
<h2 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Name</h2>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-2" src="https://i.pravatar.cc/150?img=1" alt="User Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-300 leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">March 10, 2022</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This product exceeded my expectations! Great quality and fast shipping.</p>
<div class="flex items-center">
<span class="text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
</span>
<span class="ml-3 text-gray-600 dark:text-gray-400">5/5</span>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700">
<div class="px-6 py-4 text-center">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Read More</button>
</div>
</div>
</div>Composants associés
Composant Avis sur les produits
Il s’agit d’un composant d’avis sur les produits de style neumorphique qui comprend des avatars d’utilisateurs, du texte d’avis et des étoiles. Il intègre un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Avis sur les produits
Un composant d’avis sur les produits avec des éléments de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.