Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti con un design industriale delle materie prime, una tavolozza di colori retrò/vintage tenui e il supporto della modalità scura, adatto per applicazioni meteorologiche/climatiche.
Codice 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>Componenti correlati
Componente delle recensioni dei prodotti
Un componente minimalista per le recensioni dei prodotti progettato per le interfacce dei social media, che integra una combinazione di colori triadica ed elementi interattivi.
Componente delle recensioni dei prodotti
Un complesso componente per le recensioni dei prodotti progettato per un cruscotto, con elementi di progettazione 3D, colori della terra e supporto per la modalità scura.
Componente delle recensioni dei prodotti
Componente che utilizza Tailwind CSS con stile Neumorfismo, effetti reattivi e supporto per temi scuri. Non è incluso alcun codice JavaScript. Vengono utilizzate immagini segnaposto e avatar.