Komponente "Produktbewertungen"
Eine reaktionsschnelle Produktbewertungskomponente, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und für Geschäfts-/Unternehmenswebsites geeignet ist. Es bietet Benutzer-Avatare, Rezensionen und Benutzerkommentare in einem interaktiven Layout.
HTML-Code
<div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
<div class="space-y-4">
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★★☆
</span>
<span class="ml-2 text-sm text-gray-400">4.0</span>
</div>
<p class="text-gray-300">Great product! Highly recommend it to others.</p>
<span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
</div>
</div>
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★★★
</span>
<span class="ml-2 text-sm text-gray-400">5.0</span>
</div>
<p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
<span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
</div>
</div>
<!-- Review Item -->
<div class="flex items-start bg-gray-800 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center mb-1">
<span class="text-yellow-400 text-xl">
★★★☄☄
</span>
<span class="ml-2 text-sm text-gray-400">3.0</span>
</div>
<p class="text-gray-300">It's okay, but I expected better quality.</p>
<span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Produktbewertungen"
Produktbewertungen Komponente mit Material Design, responsiven Effekten und Unterstützung für dunkle Themen.
Komponente "Produktbewertungen"
Eine reaktionsschnelle Komponente für Produktbewertungen, die mit Tailwind CSS erstellt wurde und Mikrointeraktionen beim Hover, Unterstützung für dunkle Designs und Platzhalterbilder bietet. Es wird kein JavaScript verwendet.
Komponente "Produktbewertungen"
Eine einfache Produktbewertungskomponente, die im Material Design-Stil mit einem Graustufen-Farbschema gestaltet ist.