제품 리뷰 구성 요소
비즈니스/기업 웹 사이트에 적합한 생생한 색 구성표로 다크 모드용으로 설계된 반응형 제품 리뷰 구성 요소입니다. 사용자 아바타, 리뷰 등급 및 사용자 댓글이 대화형 레이아웃으로 표시됩니다.
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>관련 구성 요소
제품 리뷰 구성 요소
사이버펑크에서 영감을 받은 패션/뷰티 제품을 위한 제품 리뷰 구성 요소로, 어두운 배경에 흙빛 액센트가 특징입니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.
레트로 제품 리뷰 카드
레트로/빈티지 미학으로 디자인된 제품 리뷰 구성 요소로, 트라이어딕 색 구성표(청록색, 자홍색, 호박색)를 사용합니다. 간단하고 반응이 빠르며 다크 모드를 지원하며 제품 피드백을 보여주는 포트폴리오에 적합합니다. Tailwind CSS를 사용합니다.