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
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.
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.
Recensioni dei prodotti Componente - Toni gioiello giocosi con messa a fuoco su prenotazione
Una componente complessa e giocosa per la recensione del prodotto con particolare attenzione alla prenotazione. Presenta colori dai toni gioiello, elementi arrotondati e piena reattività con il supporto della modalità oscura.