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 (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.
Product Reviews Component - Paper/Print-Neon/Electric
A simple, responsive product reviews component with a paper/print-inspired design and neon/electric color scheme, suitable for documentation or wiki sites. Includes dark mode support.
Product Reviews Component
A simple, responsive product reviews component suitable for a blog or content site, designed with Material Design principles. It features a triadic color scheme and dark mode support.