제품 리뷰 구성 요소
레트로/빈티지 스타일, 어스 톤 색 구성표, 적당한 복잡성 제품 리뷰 반응형 디자인과 어두운 테마 지원을 제공하는 구성 요소. 스타일링에는 Tailwind CSS를, 제품 이미지에는 picsum.photos를, 아바타에는 randomuser.me 를 사용합니다. 자바스크립트가 없습니다.
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