Search Components

Product Reviews

User reviews and ratings for products

Product Reviews Component

A product reviews component with 3D design elements, responsive effects, and dark theme support using Tailwind CSS.

                <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

Product Reviews Component

A neumorphic styled product reviews component that includes user avatars, review text, and star ratings. It incorporates responsive design and dark mode support using Tailwind CSS.

Open Preview

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

Product Reviews Component

A web component displaying user reviews for a product, featuring microinteractions and dark theme support using Tailwind CSS.

Open Preview

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

Product Reviews Component

A minimalist product reviews component designed using Tailwind CSS, featuring responsive effects and dark theme support.

Open Preview

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

Product Reviews Component 6

A responsive product review component styled with Material Design principles, supporting light and dark themes.

Open Preview

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

Search Components

Categories

Product Reviews

Product Reviews Component

Product Reviews Component

Product Reviews Component

Product Reviews Component

Product Reviews Component 6