CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Komponente "Produktbewertungen"

Komponente "Produktbewertungen"

Eine einfache Produktbewertungskomponente, die im Material Design-Stil mit einem Graustufen-Farbschema gestaltet ist.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
        <div class="mt-4">
            <div class="flex items-center mb-4">
                <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-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-400">5 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
                    <p class="text-gray-600 dark:text-gray-400">4 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
                    <p class="text-gray-600 dark:text-gray-400">3 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Produktbewertungen"

Eine minimalistische Produktbewertungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

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.

Offen

Retro_Vintage_Product_Reviews_Component

Eine einfache, reaktionsschnelle Komponente für Produktbewertungen mit Retro-/Vintage-Ästhetik, die professionelle Blautöne verwendet, die für Produktions-/Industrieunternehmen geeignet sind. Enthält Unterstützung für den Dunkelmodus.

Offen