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.
Codice HTML
<div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
<div class="mt-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">5 stars</p>
<p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">4 stars</p>
<p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">3 stars</p>
<p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Recensioni dei prodotti di gioco
Un componente giocoso e vivace per le recensioni dei prodotti per i siti Web di gioco, con elementi arrotondati, colori ad alta saturazione e un'interfaccia ricca con valutazioni a stelle, avatar degli utenti, testo delle recensioni e pulsanti Mi piace/Non mi piace. Completamente reattivo con supporto per la modalità oscura.
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
Un componente reattivo per le recensioni dei prodotti creato con Tailwind CSS, con microinterazioni al passaggio del mouse, supporto per temi scuri e immagini segnaposto. Non viene utilizzato alcun JavaScript.