Componente delle recensioni dei prodotti
Un componente di recensioni di prodotti in stile neumorfico che include avatar degli utenti, testo delle recensioni e valutazioni a stelle. Incorpora un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">This product is amazing! I loved everything about it. Highly recommend!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">Good product but needs improvement in quality.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-yellow-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
<span class="text-gray-300 line-through">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
</svg>
</span>
</div>
<p class="text-gray-600 dark:text-gray-300">Not worth the price, but still okay.</p>
</div>
</div>
</div>
<style>
.dark .shadow-lg {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.bg-white {
background: #e0e0e0;
border-radius: 20px;
}
.dark .bg-gray-800 {
background: #2c2c2c;
border-radius: 20px;
}
</style>Componenti correlati
Componente delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti, adatto a un blog o a un sito di contenuti, progettato secondo i principi del Material Design. È dotato di una combinazione di colori triadica e supporto per la modalità oscura.
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
Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica di design 3D, una combinazione di colori in bianco e nero con un accento luminoso, progettato per CRM/Business Tools, incluso il supporto della modalità scura.