Avis sur les produits

Composant Avis sur les produits

Un composant simple d’avis sur les produits conçu dans le style Material Design avec une palette de couleurs en niveaux de gris.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
        <div class="mt-4">
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-400">5 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
                    <p class="text-gray-600 dark:text-gray-400">4 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
                    <p class="text-gray-600 dark:text-gray-400">3 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
                </div>
            </div>
        </div>
    </div>
</div>

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.

Ouvrir l’aperçu

                <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">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 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">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 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>

Composant Avis sur les produits

Un composant minimaliste d’avis sur les produits conçu pour les interfaces de médias sociaux, intégrant une palette de couleurs triadique et des éléments interactifs.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
            <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
        </div>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
    <div class="flex items-center space-x-4 mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
        <textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
    </div>
</div>

Composant (Pastel skeuomorphe)

Un composant complexe et réactif d’avis sur les produits avec une esthétique de design skeuomorphe utilisant des couleurs pastel et prenant en charge le mode sombre. Comprend des cartes superposées, des dégradés subtils et des ombres pour créer de la profondeur. Comprend l’avatar, le nom, le nombre d’étoiles, le texte de l’avis et des images facultatives. Utilise Tailwind CSS exclusivement sans JavaScript.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
    <!-- Reviews Header -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
        <!-- Static Average Rating - Skeuomorphic feel -->
        <div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
            <span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
            <span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
        </div>
    </div>

    <!-- Reviews List -->
    <div class="space-y-6">
        <!-- Individual Review Card -->
        <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                        <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
            </p>

            <!-- Review Images - Skeuomorphic border/shadow -->
            <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
            </div>

            <!-- Static Helpful/Report buttons - Skeuomorphic feel -->
             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

         <!-- Individual Review Card 2 -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
            </p>

            <!-- No images for this review -->

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

        <!-- Individual Review Card 3 - Lower rating -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
            </p>

            <!-- Review Images -->
             <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
             </div>

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>
    </div>
</div>

Composant Avis sur les produits

Composant d’avis sur les produits réactifs avec un design brutal, une palette de couleurs monochromatique, une complexité complexe pour le commerce électronique, avec prise en charge du thème sombre

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white p-8 min-h-screen">
  <div class="container mx-auto">
    <h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Sarah Johnson</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">David Chen</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
      <!-- Review Card 3 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Emily Davis</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Good value for the price."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
       <!-- Review Card 4 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Michael Brown</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Solid product, works as expected."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

    </div>
  </div>
</div>

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 l’aperçu

                <div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

Composant Avis sur les produits

Un composant complexe et attrayant d’avis sur les produits avec des micro-interactions, conçu pour les sites Web d’entreprise. Le composant présente un design réactif à thème sombre utilisant Tailwind CSS, incorporant des animations et un schéma de couleurs basé sur des couleurs analogues.

Ouvrir l’aperçu

                <div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
    <div class="space-y-4">
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ★</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
    </div>
</div>

Composant Avis sur les produits

Il s’agit d’un composant complexe d’avis sur les produits conçu pour un tableau de bord, avec des éléments de conception 3D, des couleurs de terre et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.5</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">3.8</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.0</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
    </div>
</div>

Composant Avis sur les produits

Un composant réactif d’avis sur les produits conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise. Il présente des avatars d’utilisateurs, des évaluations d’avis et des commentaires d’utilisateurs dans une mise en page interactive.

Ouvrir l’aperçu

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

Composant Avis sur les produits

Un composant d’avis sur les produits conçu dans le style brutalisme, avec un contraste élevé, un design réactif et une prise en charge du thème sombre. Il comprend des avatars d’utilisateurs et des images de produits provenant de services d’espace réservé.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

Catégories