제품 리뷰 구성 요소
소셜 미디어 인터페이스용으로 설계된 반응형 제품 리뷰 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 등급, 사용자 아바타, 리뷰 텍스트 및 '더 읽기' 버튼이 포함됩니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
<div class="max-w-md mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="space-y-6">
<!-- Review 1 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">John Smith</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
</div>
<!-- Review 3 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Emily White</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
</div>
</div>
</div>
</div>관련 구성 요소
레트로 제품 리뷰 카드
레트로/빈티지 미학으로 디자인된 제품 리뷰 구성 요소로, 트라이어딕 색 구성표(청록색, 자홍색, 호박색)를 사용합니다. 간단하고 반응이 빠르며 다크 모드를 지원하며 제품 피드백을 보여주는 포트폴리오에 적합합니다. Tailwind CSS를 사용합니다.