Componente de reseñas de productos
Un componente de reseñas de productos complejo y atractivo con microinteracciones, diseñado para sitios web comerciales. El componente presenta un diseño responsivo de temática oscura que utiliza Tailwind CSS, incorporando animaciones y un esquema de color basado en colores análogos.
Código HTML
<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
<div class="space-y-4">
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ★</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de reseñas de productos
Un componente de reseñas de productos con elementos de diseño 3D, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
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.