Componente de reseñas de productos
Un componente de reseñas de productos receptivo diseñado para interfaces de redes sociales, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Incluye calificaciones, avatares de usuario, texto de revisión y un botón 'Leer más'.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
<div class="max-w-md mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="space-y-6">
<!-- Review 1 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">John Smith</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
</div>
<!-- Review 3 -->
<div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-50 text-lg">Emily White</p>
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
</div>
</div>
<p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
"It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
<button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
</p>
<p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de reseñas de productos
Un componente de reseñas de productos diseñado en estilo brutalista, con alto contraste, diseño receptivo y soporte para temas oscuros. Incluye avatares de usuario e imágenes de productos de servicios de marcador de posición.
Componente de reseñas de productos: tonos joya divertidos con enfoque en reservas
Un componente de revisión de productos complejo y lúdico con un enfoque en la reserva. Cuenta con colores en tono joya, elementos redondeados y capacidad de respuesta total con 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