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 - Papier/Impression-Néon/Electrique
Il s’agit d’un composant simple et réactif d’avis sur les produits, avec un design inspiré du papier/de l’impression et une palette de couleurs néon/électrique, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.
Composant - Tons de bijoux ludiques avec accent sur la réservation
Un élément complexe et ludique d’évaluation de produits axé sur la réservation. Dispose de couleurs de tons de bijoux, d’éléments arrondis et d’une réactivité totale avec prise en charge du mode sombre.
Carte d’évaluation de produit rétro
Un composant d’évaluation de produit conçu avec une esthétique rétro/vintage, en utilisant une palette de couleurs triadique (sarcelle, fuchsia, ambre). Il est simple, réactif, prend en charge le mode sombre et convient à un portefeuille pour présenter les commentaires sur les produits. Utilise Tailwind CSS.