Product Reviews Component
A responsive product reviews component built with Tailwind CSS, featuring microinteractions on hover, dark theme support, and placeholder images. No JavaScript is used.
HTML Code
<div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
</div>
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
</div>
</div>
</div>Related Components
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.
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
Retro/Vintage style, Earth tones color scheme, Moderate complexity Product Reviews Component with responsive design and dark theme support. Uses Tailwind CSS for styling, picsum.photos for product images, and randomuser.me for avatars. No JavaScript.