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"
Eine Produktbewertungskomponente mit 3D-Designelementen, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.
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"
Retro/Vintage-Stil, Farbschema in Erdtönen, Moderate Komplexität Produktbewertungen Komponente mit responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS für das Styling, picsum.photos für Produktbilder und randomuser.me für Avatare. Kein JavaScript.