Product Reviews Component
A minimalist product reviews component designed using Tailwind CSS, featuring responsive effects and dark theme support.
HTML Code
<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>
Related Components
Product Reviews Component 6
A responsive product review component styled with Material Design principles, supporting light and dark themes.
Product Reviews Component
A web component displaying user reviews for a product, featuring microinteractions and dark theme support using Tailwind CSS.
Product Reviews Component
A product reviews component designed in brutalism style, featuring high contrast, responsive design, and dark theme support. It includes user avatars and product images from placeholder services.