Componente de reseñas de productos
Un componente web que muestra las reseñas de los usuarios sobre un producto, con microinteracciones y compatibilidad con temas oscuros mediante Tailwind CSS.
Código 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>Componentes relacionados
Componente de reseñas de productos
Un componente minimalista de reseñas de productos diseñado para interfaces de redes sociales, integrando un esquema de color triádico y elementos interactivos.
Componente de reseñas de productos
Un componente de reseñas de productos receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, adecuado para sitios web comerciales / corporativos. Cuenta con avatares de usuario, calificaciones de reseñas y comentarios de usuarios en un diseño interactivo.
Componente de reseñas de productos
Un componente de reseñas de productos receptivo con un diseño industrial de materias primas, paleta de colores retro / vintage apagada y soporte de modo oscuro, adecuado para aplicaciones meteorológicas / climáticas.