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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.5</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">3.8</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.0</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
</div>
</div>Componenti correlati
Componente delle recensioni dei prodotti
Un componente complesso e coinvolgente per le recensioni dei prodotti con microinterazioni, progettato per i siti web aziendali. Il componente presenta un design reattivo a tema scuro che utilizza Tailwind CSS, incorporando animazioni e una combinazione di colori basata su colori analoghi.
Componente Recensioni Prodotto (Pastello Skeuomorfo)
Un componente complesso e reattivo per le recensioni dei prodotti con un'estetica di design scheumorfico che utilizza colori pastello e supporta la modalità scura. Presenta carte a strati, sfumature sottili e ombre per creare profondità. Include avatar, nome, valutazione a stelle, testo della recensione e immagini opzionali. Utilizza esclusivamente Tailwind CSS senza JavaScript.
Componente delle recensioni dei prodotti
Un componente per le recensioni dei prodotti progettato in stile brutalismo, caratterizzato da contrasto elevato, design reattivo e supporto per temi scuri. Include avatar utente e immagini di prodotti da servizi segnaposto.