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 minimalista de reseñas de productos diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Reseñas de productos Componente 6
Un componente de revisión de productos responsivo diseñado con los principios de Material Design, que admite temas claros y oscuros.
Componente de reseñas de productos
Un componente web que muestra las reseñas de los usuarios sobre un producto, con microinteracciones y compatibilidad con temas oscuros mediante Tailwind CSS.