Componente de reseñas de productos
Un componente complejo de reseñas de productos diseñado para un tablero, con elementos de diseño 3D, colores de tono tierra y soporte para el modo oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.5</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">3.8</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.0</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
</div>
</div>Componentes relacionados
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'.
Componente de reseñas de productos
Un componente minimalista de reseñas de productos diseñado para interfaces de redes sociales, integrando un esquema de color triádico y elementos interactivos.
Componente de reseñas de productos
Estilo retro/vintage, combinación de colores en tonos tierra, componente de reseñas de productos de complejidad moderada con diseño receptivo y soporte de temas oscuros. Utiliza Tailwind CSS para el estilo, picsum.photos para las imágenes de productos y randomuser.me para los avatares. Sin JavaScript.