제품 리뷰 구성 요소
비즈니스 웹 사이트를 위해 설계된 마이크로 인터랙션이 있는 복잡하고 매력적인 제품 리뷰 구성 요소입니다. 이 구성 요소는 Tailwind CSS를 사용하는 어두운 테마의 반응형 디자인을 특징으로 하며, 애니메이션과 유사한 색상을 기반으로 한 색 구성표를 통합합니다.
HTML 코드
<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
<div class="space-y-4">
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ★</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
</div>
</div>