Componente de reseñas de productos
Un componente de reseñas de productos diseñado en estilo brutalista, con alto contraste, diseño receptivo y soporte para temas oscuros. Incluye avatares de usuario e imágenes de productos de servicios de marcador de posición.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
<div class="border-t border-gray-300 dark:border-gray-600 pt-4">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
<p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
<img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
<p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
<img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image">
</div>
</div>
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
<p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
<img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
</div>
</div>
</div>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>Componentes relacionados
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
Neumorphic_Product_Reviews_Component_High_Contrast
Un componente complejo de reseñas de productos neumórficos de alto contraste con funciones de reserva/reserva, diseñado para la capacidad de respuesta y el modo oscuro, que ofrece una interfaz de usuario rica e interactiva.
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.