Componente delle recensioni dei prodotti
Un componente web che mostra le recensioni degli utenti per un prodotto, con microinterazioni e supporto per il tema scuro utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
<div class="space-y-4">
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
</div>
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
</div>
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
</div>
</div>
</div>
</div>Componenti correlati
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 con Material Design, effetti reattivi e supporto per temi scuri.
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.