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
Un composant d’évaluation de produits inspiré du cyberpunk pour les produits de mode et de beauté, avec des accents de terre sur un fond sombre. Il est réactif et prend en charge le mode 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 - Bauhaus Rainbow Gradient
Un composant simple et fonctionnel d’avis sur les produits avec un design inspiré du Bauhaus et une palette de couleurs arc-en-ciel, adapté au conseil/services. Entièrement réactif avec prise en charge du mode sombre.