Komponente "Produktbewertungen"
Eine komplexe und ansprechende Produktbewertungskomponente mit Mikrointeraktionen, die für Unternehmenswebsites entwickelt wurde. Die Komponente verfügt über ein dunkles responsives Design mit Tailwind CSS, das Animationen und ein Farbschema enthält, das auf analogen Farben basiert.
HTML-Code
<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
<div class="space-y-4">
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ★</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</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"
Produktbewertungen Komponente, die Tailwind CSS mit Neumorphism-Stil, responsiven Effekten und Unterstützung für dunkle Themen verwendet. Es ist kein JavaScript-Code enthalten. Es werden Platzhalterbilder und Avatare verwendet.
Komponente "Produktbewertungen"
Produktbewertungen Komponente mit Material Design, responsiven Effekten und Unterstützung für dunkle Themen.