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.
HTML Code
<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>Related Components
Product Reviews Component
A minimalist product reviews component designed using Tailwind CSS, featuring responsive effects and dark theme support.
Product Reviews Component
Product Reviews Component using Tailwind CSS with Neumorphism style, responsive effects, and dark theme support. No JavaScript code is included. Placeholder images and avatars are used.
Retro Product Review Card
A product review component designed with a Retro/Vintage aesthetic, using a triadic color scheme (teal, fuchsia, amber). It is simple, responsive, supports dark mode, and is suitable for a portfolio to showcase product feedback. Uses Tailwind CSS.