一个复杂且引人入胜的产品评论组件,具有微交互,专为商业网站设计。该组件采用黑暗主题的响应式设计,使用Tailwind CSS,引入动画和基于相似颜色的色彩方案。
<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto"> <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2> <div class="space-y-4"> <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600"> <div class="flex items-center mb-2"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" /> <div class="ml-3"> <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3> <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p> </div> </div> <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p> <div class="flex items-center"> <span class="text-yellow-400">★ ★ ★ ★ ☆</span> <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span> </div> </div> <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600"> <div class="flex items-center mb-2"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" /> <div class="ml-3"> <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3> <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p> </div> </div> <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p> <div class="flex items-center"> <span class="text-yellow-400">★ ★ ★ ★ ★</span> <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span> </div> </div> <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600"> <div class="flex items-center mb-2"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" /> <div class="ml-3"> <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3> <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p> </div> </div> <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p> <div class="flex items-center"> <span class="text-yellow-400">★ ★ ★ ★ ☆</span> <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span> </div> </div> </div> </div>
复古/复古风格,地球色调色彩方案,中等复杂度的产品评论组件,具有响应式设计和暗主题支持。使用Tailwind CSS进行样式设计,产品图片来自picsum.photos,头像来自randomuser.me。无需JavaScript。
一个简单的 product reviews 组件,采用 Material Design 样式设计,采用灰度配色方案。
一个复杂、有趣的产品评论组件,专注于预订/预订。具有宝石色调、圆润元素和完全响应能力,并支持深色模式。