Componente delle recensioni dei prodotti
Un componente semplice, monocromatico e scheumorfico per le recensioni dei prodotti progettato per le aziende manifatturiere/industriali, con layout reattivo e supporto per la modalità scura.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-800 font-sans">
<div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700
p-6 sm:p-8 md:p-10
transform skew-y-1 rotate-1 scale-95
hover:scale-100 hover:rotate-0 hover:skew-y-0 hover:shadow-2xl
transition-all duration-300 ease-in-out
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-300/50 before:to-transparent before:via-gray-100/30 dark:before:from-gray-700/50 dark:before:to-transparent dark:before:via-gray-900/30
after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-12 after:bg-gradient-to-t after:from-gray-200/80 after:to-transparent dark:after:from-gray-800/80 dark:after:to-transparent">
<div class="relative z-10 flex items-center justify-between mb-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Customer Feedback</h2>
<span class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-semibold shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50">Total: 124 reviews</span>
</div>
<div class="grid grid-cols-1 gap-6 sm:gap-8 relative z-10">
<!-- Review 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-300 dark:border-gray-700
transform translate-x-1 translate-y-1 rotate-1
hover:translate-x-0 hover:translate-y-0 hover:rotate-0
transition-all duration-200 ease-in-out">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">John D.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
"The XYZ-1000 machine has significantly boosted our production efficiency. Robust and reliable, it handles extreme loads with ease. A truly industrial-grade product."
</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Oct 24, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-300 dark:border-gray-700
transform translate-x-1 translate-y-1 rotate-1
hover:translate-x-0 hover:translate-y-0 hover:rotate-0
transition-all duration-200 ease-in-out">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Maria S.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
"Exceptional quality and precision from their industrial-grade components. Their team provided excellent support throughout the integration process. Highly recommend for critical applications."
</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Sep 10, 2023</p>
</div>
</div>
<button class="relative z-10 mt-8 w-full py-3 px-6
bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold rounded-lg
shadow-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-400 dark:border-gray-600
transform active:translate-y-0.5 active:shadow-none
hover:bg-gray-400 hover:dark:bg-gray-600
transition-colors duration-200 ease-in-out
text-lg sm:text-xl
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-300/30 before:to-transparent dark:before:from-gray-700/30 dark:before:to-transparent">
Load More Reviews
</button>
</div>
</div>Componenti correlati
Componente delle recensioni dei prodotti
Un componente minimalista per le recensioni dei prodotti progettato utilizzando Tailwind CSS, con effetti reattivi e supporto per i temi scuri.
Componente delle recensioni dei prodotti
Componente con Material Design, effetti reattivi e supporto per temi scuri.
Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti progettato per le interfacce dei social media, dotato di un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Include valutazioni, avatar utente, testo delle recensioni e un pulsante "Leggi di più".