Product Reviews Component
A simple product reviews component designed in Material Design style with a grayscale color scheme.
HTML Code
<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>
Related Components
Product Reviews Component
A complex product reviews component designed for a dashboard, featuring 3D design elements, earth tone colors, and support for dark mode.
Product Reviews Component
A web component displaying user reviews for a product, featuring microinteractions and dark theme support using Tailwind CSS.
Product Reviews Component
Product Reviews Component with Material Design, responsive effects, and dark theme support.