Компонент Отзывы о товаре
Отзывчивый компонент обзоров продуктов с индустриальным дизайном, приглушенной цветовой палитрой ретро/винтаж и поддержкой темного режима, подходящий для погодных и климатических условий.
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>Связанные компоненты
Компонент Отзывы о товаре
Сложный и увлекательный компонент обзоров продуктов с микровзаимодействиями, разработанный для бизнес-сайтов. Компонент отличается темным адаптивным дизайном с использованием Tailwind CSS, включая анимацию и цветовую схему, основанную на аналогичных цветах.
Playful_Ocean_Product_Reviews_Component_Real_Estate
Простой, игривый и веселый компонент обзоров продуктов, предназначенный для платформ недвижимости. Он отличается округлыми элементами, яркой океанско-синей цветовой гаммой и полной отзывчивостью с поддержкой темного режима.
Скевоморфный компонент для отзывов о продукте - Ocean Blue
Компонент обзора продукта средней сложности, выполненный в скевоморфном стиле, с использованием океанских/голубых тонов для деловых/корпоративных целей. Он отличается адаптивным дизайном, поддержкой темного режима и интерактивными элементами.