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
Código HTML
<div class="bg-gray-900 text-white p-8 min-h-screen">
<div class="container mx-auto">
<h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Review Card 1 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Sarah Johnson</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 2 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">David Chen</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 3 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Emily Davis</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Good value for the price."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
<!-- Review Card 4 -->
<div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
<div>
<p class="font-bold text-lg">Michael Brown</p>
<div class="flex items-center">
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-yellow-400 dark:text-yellow-600">★</span>
<span class="text-gray-600 dark:text-gray-400">★</span>
</div>
</div>
</div>
<p class="mb-4 italic">"Solid product, works as expected."</p>
<div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
<span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
<button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.