HTML 代码
<div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
<div class="space-y-4">
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★★☆
</span>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
<p class="text-gray-300">Great product! Highly recommend it to others.</p>
<span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
</div>
</div>
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★★★
</span>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
<p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
<span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
</div>
</div>
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★☄☄
</span>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
<p class="text-gray-300">It's okay, but I expected better quality.</p>
<span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
</div>
</div>
</div>
</div>相关组件
产品评论组件（拟物化淡彩）
一个复杂且响应迅速的 Product Reviews 组件，采用拟物化设计美学，使用柔和的色彩并支持深色模式。具有分层卡片、微妙的渐变和阴影以创建深度。包括头像、姓名、星级评定、评论文本和可选图片。仅使用 Tailwind CSS，不使用 JavaScript。
复古产品评论卡
一个产品评论组件，采用 Retro/Vintage 美学设计，使用三色配色方案（蓝绿色、紫红色、琥珀色）。它简单、响应迅速，支持深色模式，适用于用于展示产品反馈的产品组合。使用 Tailwind CSS。