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.
HTML Code
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<!-- Review Card Container -->
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Review Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
relative transition-all duration-300 ease-in-out
hover:scale-[1.01] hover:shadow-2xl hover:border-fuchsia-500 dark:hover:border-lime-400
p-6 sm:p-8">
<!-- Corner Fold Effect -->
<div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-fuchsia-400 dark:border-r-lime-400 border-t-transparent border-l-transparent
transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-400 dark:border-lime-400 object-cover mr-4">
<div>
<p class="font-semibold text-lg text-fuchsia-600 dark:text-lime-400">Alice Johnson</p>
<div class="flex mt-1">
<!-- Star Rating (Neon Blue) -->
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
</div>
</div>
</div>
<h3 class="text-xl font-bold mb-3 text-fuchsia-700 dark:text-lime-300">"Absolutely fantastic!"</h3>
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
This product exceeded my expectations. The documentation is clear and concise, making it incredibly easy to set up and use.
Highly recommend for anyone seeking reliability and performance. A true game-changer!
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
</div>
<!-- Review Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
relative transition-all duration-300 ease-in-out
hover:scale-[1.01] hover:shadow-2xl hover:border-sky-500 dark:hover:border-cyan-400
p-6 sm:p-8">
<!-- Corner Fold Effect -->
<div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-sky-400 dark:border-r-cyan-400 border-t-transparent border-l-transparent
transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-sky-400 dark:border-cyan-400 object-cover mr-4">
<div>
<p class="font-semibold text-lg text-sky-600 dark:text-cyan-400">Mark Davis</p>
<div class="flex mt-1">
<!-- Star Rating (Neon Pink) -->
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
</div>
</div>
</div>
<h3 class="text-xl font-bold mb-3 text-sky-700 dark:text-cyan-300">"Good, but room for improvement."</h3>
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
The product works as advertised, and the core functionality is solid. Some sections of the documentation could be more detailed,
especially for advanced users. Overall, a useful tool with potential.
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
</div>
</div>
<!-- Optional: Add a call to action or overall rating section -->
<div class="max-w-4xl mx-auto text-center mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-4 border-gray-300 dark:border-gray-700
relative overflow-hidden group">
<!-- Faint diagonal striped overlay for paper effect -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-100/10 to-transparent dark:via-gray-900/10 opacity-20
transform rotate-45 scale-150 pointer-events-none z-0"></div>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-blue-700 dark:text-cyan-300 mb-4 tracking-tight">
What People Say About Us
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
We value your feedback! Leave a review and help us improve.
</p>
<a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-sm
text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500
dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-400
transform transition-all duration-300 ease-out
hover:scale-105 active:scale-95
group-hover:ring-offset-lime-300 dark:group-hover:ring-offset-fuchsia-300
group-hover:ring-fuchsia-500 dark:group-hover:ring-lime-400 group-hover:ring-2">
Submit Your Review
<svg class="ml-3 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</div>
Composants associés
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 d’avis sur les produits de jeu
Il s’agit d’un composant ludique et dynamique d’avis sur les produits pour les sites Web de jeux, avec des éléments arrondis, des couleurs à haute saturation et une interface riche avec des étoiles, des avatars d’utilisateurs, du texte d’avis et des boutons J’aime/Je n’aime pas. Entièrement réactif avec prise en charge du mode sombre.
Composant Avis sur les produits
Un composant réactif d’avis sur les produits conçu pour les interfaces de médias sociaux, doté d’une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Comprend des évaluations, des avatars d’utilisateurs, un texte d’avis et un bouton « Lire la suite ».