Componenti Recensioni dei prodotti Componente delle recensioni dei prodotti

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.

Anteprima

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 delle recensioni dei prodotti

Un componente per le recensioni dei prodotti progettato in stile brutalismo, caratterizzato da contrasto elevato, design reattivo e supporto per temi scuri. Include avatar utente e immagini di prodotti da servizi segnaposto.

Aperto

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.

Aperto

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.

Aperto