Componente de reseñas de productos
Componente de reseñas de productos con diseño de materiales, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
</div>
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
</p>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</svg>
</div>
<p class="text-gray-700 dark:text-gray-300">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
</div>Componentes relacionados
Reseñas de productos Componente 6
Un componente de revisión de productos responsivo diseñado con los principios de Material Design, que admite temas claros y oscuros.
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
Componente de reseñas de productos
Un componente de reseñas de productos de estilo neumórfico que incluye avatares de usuario, texto de reseñas y calificaciones por estrellas. Incorpora diseño responsivo y soporte para el modo oscuro mediante Tailwind CSS.