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
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.
Componente de reseñas de productos neumórficos
Un componente de reseñas de productos simple y receptivo con un diseño neumórfico, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales o corporativos.
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.