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.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="px-6 py-4">
<h2 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Name</h2>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-2" src="https://i.pravatar.cc/150?img=1" alt="User Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-300 leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">March 10, 2022</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This product exceeded my expectations! Great quality and fast shipping.</p>
<div class="flex items-center">
<span class="text-yellow-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
</span>
<span class="ml-3 text-gray-600 dark:text-gray-400">5/5</span>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700">
<div class="px-6 py-4 text-center">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Read More</button>
</div>
</div>
</div>Componentes relacionados
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.
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
Tarjeta de revisión de productos retro
Un componente de revisión de productos diseñado con una estética Retro/Vintage, utilizando un esquema de color triádico (verde azulado, fucsia, ámbar). Es simple, receptivo, admite el modo oscuro y es adecuado para un portafolio para mostrar comentarios sobre el producto. Utiliza Tailwind CSS.