Componente delle recensioni dei prodotti
Componente reattivo con design brutalismo, combinazione di colori monocromatica, complessità complessa per l'e-commerce, con supporto per temi scuri
Codice 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>Componenti correlati
Componente Neumorfico delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti con un design neumorfico, una combinazione di colori analoga e il supporto della modalità scura, adatto per siti Web aziendali o aziendali.
Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti creato con Tailwind CSS, con microinterazioni al passaggio del mouse, supporto per temi scuri e immagini segnaposto. Non viene utilizzato alcun JavaScript.
Playful_Ocean_Product_Reviews_Component_Real_Estate
Un componente semplice, giocoso e allegro per le recensioni dei prodotti progettato per le piattaforme immobiliari. Presenta elementi arrotondati, una vivace combinazione di colori oceano/blu e una reattività completa con il supporto della modalità oscura.