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 minimalista de reseñas de productos diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas 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.
Componente de reseñas de productos
Un componente de reseñas de productos de estilo neumórfico que incluye avatares de usuario, texto de reseñas y calificaciones por estrellas. Incorpora diseño responsivo y soporte para el modo oscuro mediante Tailwind CSS.