Composants Avis sur les produits Composant Avis sur les produits

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

Aperçu

HTML Code

<div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>

    <div class="space-y-6">
      <!-- Review 1 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">4.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future." 
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">John Smith</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">5.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
      </div>

      <!-- Review 3 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Emily White</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">3.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
      </div>
    </div>
  </div>
</div>

Composants associés

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

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

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