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.
HTML Code
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
background-color: #e0e0e0;
}
.neumorphism-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
border-radius: 12px;
}
.neumorphism-card-dark {
background: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
}
.neumorphism-card {
background: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
}
</style>
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card 1 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
</div>
<!-- Review Card 2 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
</div>
<!-- Review Card 3 -->
<div class="neumorphism-card p-6 flex flex-col items-center text-center">
<img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
</div>
<p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
</div>
</div>
</div>Related Components
Product Reviews Component - Playful Jewel Tones with Reservation Focus
A complex, playful product review component with a focus on booking/reservation. Features jewel tone colors, rounded elements, and full responsiveness with 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.
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.