产品评论组件
复古/复古风格，地球色调色彩方案，中等复杂度的产品评论组件，具有响应式设计和暗主题支持。使用Tailwind CSS进行样式设计，产品图片来自picsum.photos，头像来自randomuser.me。无需JavaScript。
HTML 代码
<div class="container mx-auto p-4 font-mono">
<!-- Light Mode -->
<div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
<h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Review 1 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">John Doe</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star_half</span>
</div>
</div>
</div>
<p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
<img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
</div>
<!-- Review 2 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">Jane Smith</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
</div>
</div>
</div>
<p class="italic mb-4">"I