Product Reviews Component (Skeuomorphic Pastel)
A complex and responsive Product Reviews component styled with a Skeuomorphic design aesthetic using pastel colors and supporting dark mode. Features layered cards, subtle gradients, and shadows to create depth. Includes avatar, name, star rating, review text, and optional images. Uses Tailwind CSS exclusively with no JavaScript.
HTML Code
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
<!-- Reviews Header -->
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
<!-- Static Average Rating - Skeuomorphic feel -->
<div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
<span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
</div>
</div>
<!-- Reviews List -->
<div class="space-y-6">
<!-- Individual Review Card -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
</p>
<!-- Review Images - Skeuomorphic border/shadow -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
</div>
<!-- Static Helpful/Report buttons - Skeuomorphic feel -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 2 -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
</p>
<!-- No images for this review -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 3 - Lower rating -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
</p>
<!-- Review Images -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
</div>
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
</div>
</div>Related Components
Product Reviews Component
A simple product reviews component designed in Material Design style with a grayscale color scheme.
Product Reviews Component
Responsive Product Reviews Component with Brutalism design, Monochromatic color scheme, Complex complexity for E-commerce, with dark theme support
Product Reviews Component
A complex and engaging product reviews component with microinteractions, designed for business websites. The component features a dark-themed responsive design using Tailwind CSS, incorporating animations and a color scheme based on analogous colors.