Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti progettato per le interfacce dei social media, dotato di un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Include valutazioni, avatar utente, testo delle recensioni e un pulsante "Leggi di più".
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
<div class="max-w-md mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="space-y-6">
<!-- Review 1 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">John Smith</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
</div>
<!-- Review 3 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Emily White</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
</div>
</div>
</div>
</div>Componenti correlati
Recensioni dei prodotti Componente 6
Un componente reattivo per la recensione del prodotto con i principi del Material Design, che supporta temi chiari e scuri.
Componente delle recensioni dei prodotti
Componente reattivo con design brutalismo, combinazione di colori monocromatica, complessità complessa per l'e-commerce, con supporto per temi scuri
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.