제품 리뷰 구성 요소 (Skeuomorphic Pastel)
복잡하고 반응이 빠른 Product Reviews 구성 요소는 파스텔 색상을 사용하고 다크 모드를 지원하는 스큐어모픽 디자인 미학으로 스타일링되었습니다. 겹쳐진 카드, 미묘한 그라디언트, 그림자가 있어 깊이를 더해줍니다. 아바타, 이름, 별점, 리뷰 텍스트 및 선택적 이미지가 포함됩니다. JavaScript 없이 Tailwind CSS를 단독으로 사용합니다.
HTML 코드
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
<!-- Reviews Header -->
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
<!-- Static Average Rating - Skeuomorphic feel -->
<div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
<span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
</div>
</div>
<!-- Reviews List -->
<div class="space-y-6">
<!-- Individual Review Card -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
</p>
<!-- Review Images - Skeuomorphic border/shadow -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
</div>
<!-- Static Helpful/Report buttons - Skeuomorphic feel -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 2 -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
</p>
<!-- No images for this review -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 3 - Lower rating -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
</p>
<!-- Review Images -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
</div>
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
</div>
</div>관련 구성 요소
제품 리뷰 구성 요소
레트로/빈티지 스타일, 어스 톤 색 구성표, 적당한 복잡성 제품 리뷰 반응형 디자인과 어두운 테마 지원을 제공하는 구성 요소. 스타일링에는 Tailwind CSS를, 제품 이미지에는 picsum.photos를, 아바타에는 randomuser.me 를 사용합니다. 자바스크립트가 없습니다.