Componente de reseñas de productos
Un componente simple de reseñas de productos diseñado en estilo Material Design con un esquema de color en escala de grises.
Código HTML
<div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
<div class="mt-4">
<div class="flex items-center mb-4">
<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-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">5 stars</p>
<p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">4 stars</p>
<p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
</div>
</div>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">3 stars</p>
<p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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 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
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