제품 리뷰 구성 요소
산업용, 원자재 디자인, 차분한 레트로/빈티지 색상 팔레트 및 날씨/기후 응용 분야에 적합한 다크 모드 지원을 갖춘 반응형 제품 리뷰 구성 요소입니다.
HTML 코드
<section class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-300 dark:border-gray-700">
<div class="p-6 sm:p-8 lg:p-10 border-b border-gray-300 dark:border-gray-700">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-400 mb-4 tracking-tight uppercase">
Customer Insights
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300">
What users say about our <span class="font-bold text-yellow-700 dark:text-yellow-500">Atmospheric Sensor Pro</span>.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-6 sm:p-8 lg:p-10">
<!-- Overall Rating Section -->
<div class="md:col-span-1 border-r md:border-b-0 md:border-r border-gray-300 dark:border-gray-700 pr-8 md:pr-0 pb-8 md:pb-0">
<div class="sticky top-8 lg:top-10">
<h3 class="text-2xl font-bold mb-4 text-blue-700 dark:text-blue-300 uppercase">Overall Rating</h3>
<div class="flex items-center mb-2">
<p class="text-6xl font-extrabold text-yellow-700 dark:text-yellow-500 mr-2">4.7</p>
<div class="text-yellow-600 dark:text-yellow-400 flex text-2xl">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-6 h-6 fill-current text-gray-500 dark:text-gray-400" viewBox="0 0 24 24"><path d="M12 2.587l1.096 2.224 2.457.357-1.782 1.74.42 2.449L12 8.922l-2.191 1.152.42-2.449-1.782-1.74 2.457-.357L12 2.587zM12 0l-3.328 6.721L0 7.228l4.981 4.85-1.173 6.84L12 16.32l8.192 4.316-1.173-6.84L24 7.228l-8.672-.493L12 0z"/></svg>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Based on <span class="font-bold">1,234 reviews</span></p>
<div class="mt-6 space-y-2">
<div class="flex items-center">
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">5 Star</span>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
</div>
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">90%</span>
</div>
<div class="flex items-center">
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">4 Star</span>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 70%"></div>
</div>
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">70%</span>
</div>
<div class="flex items-center">
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">3 Star</span>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 30%"></div>
</div>
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">30%</span>
</div>
<div class="flex items-center">
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">2 Star</span>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 10%"></div>
</div>
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">10%</span>
</div>
<div class="flex items-center">
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">1 Star</span>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 5%"></div>
</div>
<span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">5%</span>
</div>
</div>
</div>
</div>
<!-- Individual Reviews Section -->
<div class="md:col-span-2 space-y-8">
<h3 class="text-2xl font-bold text-blue-700 dark:text-blue-300 uppercase">Recent Reviews</h3>
<!-- Review 1 -->
<article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Eleanor Vance</h4>
<div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current text-gray-500 dark:text-gray-400" viewBox="0 0 24 24"><path d="M12 2.587l1.096 2.224 2.457.357-1.782 1.74.42 2.449L12 8.922l-2.191 1.152.42-2.449-1.782-1.74 2.457-.357L12 2.587zM12 0l-3.328 6.721L0 7.228l4.981 4.85-1.173 6.84L12 16.32l8.192 4.316-1.173-6.84L24 7.228l-8.672-.493L12 0z"/></svg>
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">4.0 stars</span>
</div>
</div>
</div>
<h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Absolutely crucial for outdoor enthusiasts!"</h5>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
I've been using this atmospheric sensor for my hiking trips, and it's incredibly accurate. Provides real-time humidity, temperature, and pressure readings. The build quality feels very robust, like it can handle any weather. Highly recommend for serious meteorology buffs or anyone who needs precise environmental data.
</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<p class="mr-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
<button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
Helpful (12)
</button>
</div>
<div class="mt-4 border-t border-gray-400 dark:border-gray-600 pt-4">
<img src="https://picsum.photos/300/200?random=1" alt="Product image from review" class="w-full sm:w-64 h-auto rounded-md object-cover border border-gray-500 dark:border-gray-600 shadow-md">
</div>
</article>
<!-- Review 2 -->
<article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Robertson</h4>
<div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">5.0 stars</span>
</div>
</div>
</div>
<h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Unmatched precision for my weather station!"</h5>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
As an amateur meteorologist, I'm always looking for reliable instruments. This sensor exceeded my expectations, providing consistent and precise data that integrates seamlessly with my existing home weather station software. The durable, industrial design is a huge plus.
</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<p class="mr-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
<button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
Helpful (9)
</button>
</div>
</article>
<!-- Review 3 -->
<article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
src="https://randomuser.me/api/portraits/women/67.jpg" alt="Reviewer Avatar">
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sandra Chen</h4>
<div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">3.0 stars</span>
</div>
</div>
</div>
<h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Good for basic monitoring, but connectivity issues."</h5>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The sensor provides accurate readings for temperature and humidity. It's built like a tank. However, I've had some occasional issues with it maintaining a stable connection to my network, which can be frustrating. Otherwise, it's a solid piece of gear for environmental sensing.
</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<p class="mr-4">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
<button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
Helpful (5)
</button>
</div>
</article>
<div class="text-center mt-8">
<button class="px-8 py-3 bg-blue-700 hover:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold rounded-lg uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 shadow-lg border border-blue-800 dark:border-blue-600">
Load More Reviews
</button>
</div>
</div>
</div>
</div>
</section>관련 구성 요소
제품 리뷰 구성 요소
소셜 미디어 인터페이스용으로 설계된 반응형 제품 리뷰 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 등급, 사용자 아바타, 리뷰 텍스트 및 '더 읽기' 버튼이 포함됩니다.
제품 리뷰 구성 요소
제품 리뷰 Neumorphism 스타일, 반응형 효과 및 어두운 테마 지원과 함께 Tailwind CSS를 사용하는 구성 요소. JavaScript 코드는 포함되어 있지 않습니다. 자리 표시자 이미지와 아바타가 사용됩니다.
게임 제품 리뷰 구성 요소
게임 웹사이트를 위한 재미있고 생동감 넘치는 제품 리뷰 구성 요소로, 둥근 요소, 채도가 높은 색상, 별 등급, 사용자 아바타, 리뷰 텍스트 및 좋아요/싫어요 버튼이 있는 풍부한 인터페이스를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.