Componente delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti, adatto a un blog o a un sito di contenuti, progettato secondo i principi del Material Design. È dotato di una combinazione di colori triadica e supporto per la modalità oscura.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8 md:p-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 text-center tracking-tight leading-tight">
Customer Reviews
</h2>
<div class="space-y-8">
<!-- Review 1 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-md">
<img class="w-16 h-16 rounded-full object-cover ring-2 ring-blue-500 dark:ring-blue-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar">
<div class="flex-grow">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</p>
<div class="flex text-yellow-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"This product exceeded my expectations!"</p>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
I've been using this for a few weeks now and I'm incredibly impressed. It's user-friendly, robust, and performs exactly as advertised. Highly recommend for anyone looking for a reliable solution. The material quality feels premium.
</p>
</div>
</div>
<!-- Review 2 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-purple-50 dark:bg-gray-700 rounded-lg shadow-md">
<img class="w-16 h-16 rounded-full object-cover ring-2 ring-purple-500 dark:ring-purple-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Reviewer Avatar">
<div class="flex-grow">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300">David Lee</p>
<div class="flex text-yellow-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 20 20"><path d="M10 15.27l-3.82 2.43 1.05-4.59-3.56-3.09 4.67-.4 1.86-4.22 1.86 4.22 4.67.4-3.56 3.09 1.05 4.59z"/></svg>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Good value for the price, minor flaw."</p>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
Overall, I'm happy with my purchase. It does what it promises and is a good value. However, I noticed a small ding on the side upon arrival, which was a bit disappointing. Still, it functions perfectly.
</p>
</div>
</div>
<!-- Review 3 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-yellow-50 dark:bg-gray-700 rounded-lg shadow-md">
<img class="w-16 h-16 rounded-full object-cover ring-2 ring-yellow-500 dark:ring-yellow-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Reviewer Avatar">
<div class="flex-grow">
<div class="flex items-center justify-between mb-2">
<p class="text-lg font-semibold text-yellow-700 dark:text-yellow-300">Sarah Kim</p>
<div class="flex text-yellow-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Absolutely perfect, no complaints!"</p>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
From the moment I unboxed it, I knew this was a quality product. Setup was a breeze, and it works flawlessly. It's truly transformed my daily routine. A definite five-star experience!
</p>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente delle recensioni dei prodotti
Un componente complesso e coinvolgente per le recensioni dei prodotti con microinterazioni, progettato per i siti web aziendali. Il componente presenta un design reattivo a tema scuro che utilizza Tailwind CSS, incorporando animazioni e una combinazione di colori basata su colori analoghi.
Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti progettato per la modalità oscura con una combinazione di colori vivaci, adatto per siti Web aziendali/aziendali. Presenta avatar degli utenti, valutazioni delle recensioni e commenti degli utenti in un layout interattivo.
Componente delle recensioni dei prodotti
Un componente per le recensioni dei prodotti con elementi di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.