Rechercher des composants

Catégories

Composants Avis sur les produits

Avis sur les produits

Avis et évaluations des utilisateurs sur les produits

Composant Avis sur les produits

Un composant d’avis sur les produits avec des éléments de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

Composant Avis sur les produits

Il s’agit d’un composant d’avis sur les produits de style neumorphique qui comprend des avatars d’utilisateurs, du texte d’avis et des étoiles. Il intègre un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">This product is amazing! I loved everything about it. Highly recommend!</p>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Good product but needs improvement in quality.</p>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Not worth the price, but still okay.</p>
        </div>
    </div>
</div>
<style>
    .dark .shadow-lg {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    .bg-white {
        background: #e0e0e0;
        border-radius: 20px;
    }
    .dark .bg-gray-800 {
        background: #2c2c2c;
        border-radius: 20px;
    }
</style>

Composant Avis sur les produits

Composant Web affichant les avis des utilisateurs sur un produit, avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
        <div class="space-y-4">
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
            </div>
        </div>
    </div>
</div>

Composant Avis sur les produits

Un composant minimaliste d’avis sur les produits conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4">
        <h2 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Name</h2>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://i.pravatar.cc/150?img=1" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-gray-300 leading-none">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">March 10, 2022</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This product exceeded my expectations! Great quality and fast shipping.</p>
        <div class="flex items-center">
            <span class="text-yellow-400">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
            </span>
            <span class="ml-3 text-gray-600 dark:text-gray-400">5/5</span>
        </div>
    </div>
    <div class="border-t border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 text-center">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Read More</button>
        </div>
    </div>
</div>

Avis sur le produit Composant 6

Un composant d’évaluation de produit réactif conçu selon les principes de Material Design, prenant en charge les thèmes clairs et sombres.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Reviews</h2>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">John Doe</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">5/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">This product is amazing! Highly recommend it to everyone.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Jane Smith</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">4/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">Good quality, but the shipping took too long.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Mike Johnson</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">3/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">It works fine, but I've seen better products in this range.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Add a Review</h3>
        <textarea class="w-full mt-2 p-2 border border-gray-300 rounded-md dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Write your review..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Submit</button>
    </div>
</div>