Componente Recensioni Prodotto (Pastello Skeuomorfo)
Un componente complesso e reattivo per le recensioni dei prodotti con un'estetica di design scheumorfico che utilizza colori pastello e supporta la modalità scura. Presenta carte a strati, sfumature sottili e ombre per creare profondità. Include avatar, nome, valutazione a stelle, testo della recensione e immagini opzionali. Utilizza esclusivamente Tailwind CSS senza JavaScript.
Codice HTML
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
<!-- Reviews Header -->
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
<!-- Static Average Rating - Skeuomorphic feel -->
<div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
<span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
</div>
</div>
<!-- Reviews List -->
<div class="space-y-6">
<!-- Individual Review Card -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
</p>
<!-- Review Images - Skeuomorphic border/shadow -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
</div>
<!-- Static Helpful/Report buttons - Skeuomorphic feel -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 2 -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
</p>
<!-- No images for this review -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 3 - Lower rating -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
</p>
<!-- Review Images -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
</div>
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente delle recensioni dei prodotti
Componente con Material Design, effetti reattivi e supporto per temi scuri.
Retro_Vintage_Product_Reviews_Component
Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica retrò/vintage, che utilizza toni blu professionali adatti ad aziende manifatturiere/industriali. Include il supporto per la modalità scura.
Componente delle recensioni dei prodotti
Un semplice componente per le recensioni dei prodotti progettato in stile Material Design con una combinazione di colori in scala di grigi.