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.
Codice HTML
<div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Reviews</h2>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">John Doe</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">5/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">This product is amazing! Highly recommend it to everyone.</p>
</div>
</div>
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">Jane Smith</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">4/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">Good quality, but the shipping took too long.</p>
</div>
</div>
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">Mike Johnson</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">3/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">It works fine, but I've seen better products in this range.</p>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Add a Review</h3>
<textarea class="w-full mt-2 p-2 border border-gray-300 rounded-md dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Write your review..."></textarea>
<button class="mt-2 bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Submit</button>
</div>
</div>Componenti correlati
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.
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
Stile retrò/vintage, combinazione di colori dei toni della terra, complessità moderata Recensioni dei prodotti Componente con design reattivo e supporto per temi scuri. Utilizza Tailwind CSS per lo styling, picsum.photos per le immagini dei prodotti e randomuser.me per gli avatar. Niente JavaScript.