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 con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de reseñas de productos
Un componente de reseñas de productos simple, monocromático y esqueuomórfico diseñado para empresas manufactureras/industriales, con diseño receptivo y soporte para modo oscuro.
Componente de reseñas de productos
Componente de reseñas de productos receptivo con diseño brutalista, combinación de colores monocromática, complejidad compleja para el comercio electrónico, con soporte de tema oscuro