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-4 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>
<div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
<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>
<h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
<div class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
</div>
<div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
<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>
<h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
<div class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>Componentes relacionados
Componente de reseñas de productos de juegos
Un componente de reseñas de productos divertido y vibrante para sitios web de juegos, con elementos redondeados, colores de alta saturación y una interfaz rica con calificaciones de estrellas, avatares de usuario, texto de revisión y botones de me gusta / no me gusta. Totalmente receptivo con soporte para modo oscuro.
Componente de reseñas de productos (pastel esqueuomórfico)
Un componente de reseñas de productos complejo y receptivo con una estética de diseño skeuomórfico que utiliza colores pastel y admite el modo oscuro. Cuenta con tarjetas en capas, degradados sutiles y sombras para crear profundidad. Incluye avatar, nombre, calificación de estrellas, texto de revisión e imágenes opcionales. Utiliza Tailwind CSS exclusivamente sin JavaScript.
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.