Komponente "Produktbewertungen"
Eine neumorph gestaltete Produktbewertungskomponente, die Benutzeravatare, Bewertungstext und Sternebewertungen enthält. Es enthält responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.
HTML-Code
<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>Verwandte Komponenten
Produktbewertungen Komponente 6
Eine reaktionsschnelle Produktbewertungskomponente, die nach Material Design-Prinzipien gestaltet ist und helle und dunkle Themen unterstützt.
Komponente "Produktbewertungen"
Produktbewertungen Komponente mit Material Design, responsiven Effekten und Unterstützung für dunkle Themen.
Komponente "Produktbewertungen"
Eine komplexe Produktbewertungskomponente, die für ein Dashboard entwickelt wurde, mit 3D-Designelementen, Erdtönen und Unterstützung für den Dunkelmodus.