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
Componente de reseñas de productos
Un componente responsivo de reseñas de productos creado con Tailwind CSS, con microinteracciones al pasar el mouse, compatibilidad con temas oscuros e imágenes de marcador de posición. No se utiliza JavaScript.
Componente de reseñas de productos
Componente de reseñas de productos con diseño de materiales, efectos responsivos y compatibilidad con temas oscuros.