Composants Avis sur les produits Composant - Papier/Impression-Néon/Electrique

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.

Aperçu

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.

Ouvrir

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.

Ouvrir

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 ».

Ouvrir