Product Reviews 组件
专为社交媒体界面设计的响应式产品评论组件，具有具有灰度配色方案的深色模式 UI。包括评分、用户头像、评论文本和“阅读更多”按钮。
HTML 代码
<div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
<div class="max-w-md mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="space-y-6">
<!-- Review 1 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">John Smith</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
</div>
<!-- Review 3 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Emily White</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
</div>
</div>
</div>
</div>