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.
HTML Code
<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
<div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
★★★★☆ <!-- 4 out of 5 stars -->
</div>
</div>
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 leading-relaxed">
This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
</p>
</div>
</div>
<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
<div>
<p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
<div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
★★★★★ <!-- 5 out of 5 stars -->
</div>
</div>
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 leading-relaxed">
Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
</p>
</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
Composant Web affichant les avis des utilisateurs sur un produit, avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.