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.
HTML-Code
<div class="container mx-auto p-4 font-mono">
<!-- Light Mode -->
<div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
<h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Review 1 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">John Doe</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star_half</span>
</div>
</div>
</div>
<p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
<img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
</div>
<!-- Review 2 -->
<div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
<div class="ml-4">
<h3 class="text-lg font-semibold">Jane Smith</h3>
<div class="flex items-center text-yellow-600">
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
<span class="material-icons">star</span>
</div>
</div>
</div>
<p class="italic mb-4">"IVerwandte Komponenten
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.
Komponente "Produktbewertungen"
Eine einfache Produktbewertungskomponente, die im Material Design-Stil mit einem Graustufen-Farbschema gestaltet ist.
Komponente "Produktbewertungen"
Eine Produktbewertungskomponente mit 3D-Designelementen, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.