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
Stile retrò/vintage, combinazione di colori dei toni della terra, complessità moderata Recensioni dei prodotti Componente con design reattivo e supporto per temi scuri. Utilizza Tailwind CSS per lo styling, picsum.photos per le immagini dei prodotti e randomuser.me per gli avatar. Niente JavaScript.
Componente delle recensioni dei prodotti
Un componente per le recensioni dei prodotti con elementi di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente delle recensioni dei prodotti
Un complesso componente per le recensioni dei prodotti progettato per un cruscotto, con elementi di progettazione 3D, colori della terra e supporto per la modalità scura.